Layout Issue: Cannot set Full Width for Google My Maps iframe in Masu Theme

  • Unknown's avatar
    joelcpellicer · Member ·

    Hi there,

    I am using the Masu theme on my site (https://pixeljoelblog.wordpress.com/maps/seleccionpersonal/) and I am unable to make a Google My Maps iframe occupy the full width of the screen on Desktop.

    I have already tried the following without success:

    1. Using a Custom HTML block with 100vw and negative margins (margin-left: -50vw).
    2. Wrapping the HTML in a Group block and setting it to “Full Width” in the Block Editor.
    3. Editing the page in the Code Editor to manually add the and alignfull classes.

    In the editor’s “Preview” mode, the map correctly expands to the edges of the screen. However, once the page is Published, the map is forced back into a narrow central column, ignoring all CSS and block alignment settings.

    It seems the theme’s main container (.entry-content or similar) has a fixed max-width that I cannot override with standard blocks.

    Could you please help me make this specific map block Full Width on this page?

    Thank you!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    imranbru · Member ·

    Add this to Appearance → Customize → Additional CSS:

    .page-id-123 .entry-content { max-width: none; }
    .page-id-123 .entry-content .alignfull {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    }

    Replace “123” with your page ID.

Log in or create an account to reply