Clever Geek Handbook

Two Google Translator widgets for responsive layout

I recently ran into the problem of adding another GoogleTranslator widget to my webpage. I've done some research, apparently Google won't allow more than one GoogleTranslator widget in a template.

Has anyone experienced the same problem? Is there a solution? In responsive design, I need to duplicate some blocks and use them in different orders.

+1


source to share


2 answers


Create two container divs - one for your "regular" layout, one for your "mobile" layout (or more, depending on what you're doing). The widget starts inside a "regular" layout container. Add JavaScript to listen to the window width. If it is below a specific breakpoint (768px or less, 480px or less, etc.), move the widget to a different div.

I had this work for me - however the widget itself is not responsive, so you have to deal with the new problem of languages ​​that don't fit in the viewport.



Hope it helps.

+1


source


This worked for me. Add the following to your CSS:

#google_translate_element img
{
width: auto !important;
}


You may need to rename the container based on what's in your structural code.

-1


source






More articles:


All Articles