WordPress Better Health主题页脚Google Map iframe无法全屏显示求助

Hey there! I’ve run into similar theme-related iframe width issues before—let’s get your Google Map displaying full-width properly in the footer. Here are targeted fixes to try:

1. Update Your Iframe Code with Forced Full-Width Styles #

Sometimes basic width/height attributes get overridden by theme CSS. Modify your iframe to include inline styles that enforce full width:

<iframe 
    src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6523.972232754733!2d33.313468!3d35.156967!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x552d685f196ffa7c!2zzpnOkc6kzqHOmc6azp8gzprOlc6dzqTOoc6fICLOnyDOkc6gzp_Oo86kzp_Om86fzqMgzpvOn86lzprOkc6jIg!5e0!3m2!1sen!2sus!"
    width="100%" 
    height="450" 
    frameborder="0" 
    style="border:0; width: 100% !important; height: 450px !important; min-width: 100%;"
    allowfullscreen>
</iframe>

The !important flag helps push through any theme-specific styles that might be limiting the iframe’s width.

2. Override Theme Container Restrictions with Custom CSS #

If the footer’s parent container is still constraining the map, add this custom CSS to your theme:

1. Go to WordPress Dashboard > Appearance > Customize > Additional CSS
2. Paste this code:

/* Force full-width for footer Google Map */
.footer-widget-area iframe {
    width: 100% !important;
    height: 450px !important;
    display: block;
    margin: 0;
    padding: 0;
}

If you added the map to a specific widget, target it more precisely by adding a custom class to the widget (e.g., footer-map-widget) and updating the selector to .footer-map-widget iframe.

3. Check Your Footer Widget Layout #

Better Health likely splits the footer into multiple columns. If you placed the map in a column widget, it’ll only occupy that column’s width. Fix this by:

• Looking for a full-width footer widget area in Appearance > Widgets and moving your map there
• Adjusting the footer column layout in the theme customizer (under Footer Settings) if no full-width area exists

After making changes, clear your WordPress and browser cache to see the updates take effect.

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