- This topic has 11 replies, 3 voices, and was last updated 4 years, 3 months ago by
.
-
Posts
-
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.
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 🙂
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-widthHi 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!
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-mapon 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. 😀
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! 😀
- You must be logged in to reply to this topic.
