Hey there! I’ve run into this exact issue with Google Translate’s iframe not playing nice on mobile screens before—let’s get it sorted out. The problem is that Google’s default styles for the translate element don’t account for narrow viewports, so we’ll need to add custom CSS to force it to adapt.

Here’s what you need to do:

Step 1: Add Custom CSS to Your WordPress Site #

First, head over to your WordPress dashboard → Appearance → Customize → Additional CSS (this is the safest place to add custom styles without worrying about theme updates overwriting them). Paste in the following code:

/* Fix Google Translate iframe responsiveness on small screens */
@media (max-width: 768px) {
  /* Force the translate banner iframe to fit the screen width */
  .goog-te-banner-frame.skiptranslate {
    width: 100% !important;
    height: auto !important;
    max-width: 100vw !important;
  }

  /* Fix the body margin added by Google Translate (prevents unwanted top space) */
  body.goog-translate {
    margin-top: 0 !important;
  }

  /* Adjust the language selector dropdown to fit mobile screens */
  .goog-te-menu-frame {
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Hide redundant "Powered by Google" text (optional, for cleaner layout) */
  .goog-logo-link {
    display: none !important;
  }
  .goog-te-gadget {
    color: transparent !important;
  }
}

/* Prevent horizontal scrolling caused by misbehaving Google Translate elements */
body {
  overflow-x: hidden !important;
}

Step 2: What Each Part of the CSS Does #

Let’s break down the key bits:

• The @media (max-width: 768px) rule targets screens smaller than a tablet—adjust the pixel value if you need to target a different breakpoint (like 480px for smaller phones).
• .goog-te-banner-frame.skiptranslate forces the top translation bar iframe to take up 100% of the screen width instead of its fixed default size.
• We reset body.goog-translate margin because Google automatically adds top margin when the translation bar is active, which can break mobile layouts.
• .goog-te-menu-frame ensures the language selector dropdown doesn’t overflow off the screen on mobile.
• The optional rules hide the "Powered by Google" text if you want a cleaner look—just remove those lines if you want to keep it visible.
• The final overflow-x: hidden rule stops unwanted horizontal scrolling caused by any misaligned Google Translate elements.

Step 3: Test and Tweak #

After adding the CSS, click Publish in the customizer, then clear your site and browser cache to see the changes. Test on a mobile device or use your browser’s dev tools to simulate a small screen—you should see the translation bar now fits perfectly without overflowing.

If you still run into issues, feel free to adjust the breakpoint or height values in the CSS to match your site’s specific layout.

内容的提问来源于stack exchange，提问作者Filil Lindbladh