Menu
On my website I'm using "Google Translate My Page" widget: https://translate.google.com/manager/website/
Widget is working great, but on smaller screens there is a problem. The iframe window is not resizing correctly, so the languages on the right side are cut off.
You can see it here:
As I looked into the code, there are fixed div heights and widths in a few levels, so it's not so easy to change everything, especially because it's loaded in an iframe.
Thanks for help!
361
asked Oct 25 '25 02:10
There are several possible solutions:
Looks like you selected the "Inline | Dropdown only" widget type. Try the "Inline | Horizontal" or "Inline | Vertical". As of today, it renders as a standard select tag, which should work fine for mobile screens.
You can have single widget jumping from panel to panel depending on your layout as suggested here.
You can create two widgets having different styles (dropdown for desktop, vertical / horizontal for mobile). This may cause problems if you try to use both of them to translate the page, though.
If you really need to use the dropdown, you will have to use scripts, because the dropdown contents is a frame, as mentioned in comments above. You will need to do two things: a) make the iframe width fit your current screen width and b) apply overflow: auto to the <body> tag inside the iframe to enable dropdown scrolling.
64
answered Oct 26 '25 17:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With