[Resolved] Google Maps (wpgmaps) and full width

Home Forums Support [Resolved] Google Maps (wpgmaps) and full width

Home Forums Support Google Maps (wpgmaps) and full width

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #2061652
    loixiyo

    Hello,

    I’m trying to display a map (Google Maps) in a page, using 100% width for the map. The map has been created using the plugn “WP Google Maps”.

    Once I add the map in a page, the map is not using the whole width. If I switch to the theme “Twenty Twenty-One” then it works as expected.

    I have created a single page with an image (100% full width working fine) and a map (100% width not working).

    Do you know where the problem can be?

    Thank you very much.

    #2062005
    Leo
    Staff
    Customer Support

    Hi there,

    Is there a chance you can start a live staging site so we don’t have to map the domain to see the site?

    We would appreciate that ๐Ÿ™‚

    #2062169
    loixiyo

    Hi Leo,

    thanks for your reply. I have just added the DNS record to make the domain public and I will remove it when you are done.

    Are you able to access the site now?

    Thanks.

    #2062248
    Leo
    Staff
    Customer Support
    #2062468
    loixiyo

    Hi Leo,

    that would make the whole page to be full page. My idea is to keep it wrapped, same as all the pages, and only set the map 100% width. Same as it happens when setting the theme Twenty-TwentyOne.

    I think that is supported for other blocks, right?

    While you investigate I’ll keep trying other options and contact the plugin developer as well, just in case :-).

    Thanks!

    #2062500
    Elvin
    Staff
    Customer Support

    Hi there,

    I think we can go with the map you’ve placed inside the block you’ve added Full-width on.

    Add full-map on the Additional CSS Class(es) field of the block containing the map and add this CSS:

    .full-map .wp-block-group__inner-container {
        width: 100%;
        max-width: 100%;
    }

    This should be how it will look like – https://share.getcloudapp.com/Blud0zAp

    #2063090
    loixiyo

    Hi Elvin,

    thank you for your answer. This workaround is working, I can now see the map full width! The solution can be OK :-).

    Anyway, I think this css should not be needed if at least the block “Group” or the map are configured to use 100%. In this case, both of them were configured like that so it should work without additional styles, right?

    I will check new releases in case this is fixed and I can remove the workaround. In the meanwhile my problem is solved so I’m happy.

    Have a nice day!

    #2063480
    Elvin
    Staff
    Customer Support

    Anyway, I think this css should not be needed if at least the block โ€œGroupโ€ or the map are configured to use 100%. In this case, both of them were configured like that so it should work without additional styles, right?

    The theme’s customizer settings generates a max-width of 1200px for the inner content of the Group block, wp-block-group__inner-container.

    Personally, I’d consider using GenerateBlocks for its container for this one so the CSS won’t be needed. ๐Ÿ˜€

    #2063556
    loixiyo

    Hi Elvin,

    I see! The only think I need is to make the css work in mobile screens as well, I will check the CSS I need.

    Thank you for you support and your explanations :-).

    #2063561
    Elvin
    Staff
    Customer Support

    The left and right gap on mobile is from the padding.

    You can remove it with this:

    @media (max-width:768px){
        .wp-block-getwid-section__wrapper {
        padding: 0;
    }
    }
    #2063570
    loixiyo

    It worked!

    I can close this ticket now.

    Thanks!

    #2068210
    Elvin
    Staff
    Customer Support

    No problem.

    Happy new year! ๐Ÿ˜€

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.