Google Maps (wpgmaps) and full width

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 :)

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.

Would this option help?
https://docs.generatepress.com/article/content-container/#full-width

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!

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

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!

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. :D

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 :-).

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;
}
}

It worked!

I can close this ticket now.

Thanks!

No problem.

Happy new year! :D