구글번역 스크립트
본문
사정이 있어서 다국어로 아래와 같은 스크립트를 사용 했습니다.
나리야 빌더를 사용하여 완전히는 번역되지 않겠지만 아래와 같은 스크립트를 알게 되어 메인에 삽입하였고 PC버전에서는 그런대로 괜찮은거 같은데 모바일 버전에서는 PC버전 같이 나오지 않고 국가명이 짤리네요 이걸 세로로 다 나오게 할 수 있을까요 ?
고수님들 부탁 드립니다.
--------------------- 사용 스크립트---------------------------------
<style type="text/css">
<!--
#goog-gt-tt {display:none !important;}
.goog-te-banner-frame {display:none !important;}
.goog-te-menu-value:hover {text-decoration:none !important;}
.goog-te-gadget-icon {background-image:url(//gtranslate.net/flags/gt_logo_19x19.gif) !important;background-position:0 0 !important;}
body {top:0 !important;}
-->
</style>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'ko', layout: google.translate.TranslateElement.InlineLayout.SIMPLE,autoDisplay: false, includedLanguages: ''}, 'google_translate_element');}
</script><script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
---------------------------- PC 버전일때 -------------------------------------
* 모바일 버전일때 이렇게 짤립니다 ㅠㅠ
답변 4
<style>
<!--
~~
-->
@media (max-width:767px) {
#google_translate_element {width:100%;}
}
</style>
처럼 <!-- 와 --> 사이 말고 넣어보세요.
처럼 <!-- 와 --> 사이 말고 넣어보세요.
확신의 말씀 주셔서
<!-- 번역 시작 { -->
<style type="text/css">
<!--
#goog-gt-tt {display:none !important;}
.goog-te-banner-frame {display:none !important;}
.goog-te-menu-value:hover {text-decoration:none !important;}
.goog-te-gadget-icon {background-image:url(//gtranslate.net/flags/gt_logo_19x19.gif) !important;background-position:0 0 !important;}
body {top:0 !important;}
-->
@media (max-width:367px) {
#google_translate_element {width:100%;}
}
</style>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'ko', layout: google.translate.TranslateElement.InlineLayout.SIMPLE,autoDisplay: false, includedLanguages: ''}, 'google_translate_element');}
</script><script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- 번역 끝 { -->
이렇게 했는데도 변화가 없네요 ㅠㅠ
감사드립니다.
스크롤 기능을 넣는 걸로 해결 되었습니다.
도움 주셔서 다시 한 번 감사 드립니다.
div의 넓이가 고정되어 있는게 아닐까요?
css로 100%로 주면 어떨지 해보세요.
@media (max-width:767px) {
#google_translate_element {width:100%;}
}
댓글 거듭 감사 드립니다.
넓이를 767외에 567, 367등으로 해도 변하지 않네요 ㅠㅠ
<!-- 번역 시작 { -->
<style type="text/css">
<!--
@media (max-width:767px) {
#google_translate_element {width:100%;}
}
#goog-gt-tt {display:none !important;}
.goog-te-banner-frame {display:none !important;}
.goog-te-menu-value:hover {text-decoration:none !important;}
.goog-te-gadget-icon {background-image:url(//gtranslate.net/flags/gt_logo_19x19.gif) !important;background-position:0 0 !important;}
body {top:0 !important;}
-->
</style>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'ko', layout: google.translate.TranslateElement.InlineLayout.SIMPLE,autoDisplay: false, includedLanguages: ''}, 'google_translate_element');}
</script><script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- 번역 끝 { -->
답변 감사드립니다.
이 코드를 어디에 넣어야 할지요 ?
코린이 입니다.
css 구문이므로 처음 올려주신 소스에서 <style>과</style> 사이에 넣어주시면 되겠습니다.
<style>
~~
~~
@media (max-width:767px) {
#google_translate_element {width:100%;}
}
</style>