Clever Geek Handbook

Google Translate dropdown does not resize on smaller screens

On my website I use the "Google Translate My Page" widget: https://translate.google.com/manager/website/

The widget works fine, but there is a problem on small screens. The iframe does not resize correctly, so the languages ​​on the right side are clipped.

You can see it here:

enter image description here

As I went through the code, there are fixed div heights and widths across multiple levels, so changing things is not that easy, especially since it loads into an iframe.

Thanks for the help!

+3


source to share


2 answers


There are several possible solutions:



  • It looks like you have selected the "Inline | Dropdown only" widget type. Try "Inline | Horizontal" or "Inline | Vertical". As of today, it appears as a standard select tag, which should work fine for mobile screens.

  • You can have one widget bouncing from panel to panel depending on your layout, as suggested here .

  • You can create two widgets with different styles (dropdown for desktop, vertical / horizontal for mobile). This can cause problems if you try to use both of them to translate the page.

  • If you really need to use the dropdown you will have to use scripts because the dropdown content is a frame as stated in the comments above. You will need to do two things: a) make the width of the iframe match your screen width and b) apply overflow: automatically to the tag <body>

    inside the iframe to enable scrolling down.

+2


source


Alternatively, you can try to remove the iFrame's height and width attributes, add a container with a frame around the iFrame, and some more CSS to make the iFrame responsive again, all of which are described in more detail in the Responsive IFrames - The Right Way! article .



+1


source






More articles:


All Articles