- This topic has 11 replies, 3 voices, and was last updated 2 years, 2 months ago by Elvin.
-
AuthorPosts
-
December 28, 2021 at 6:34 am #2061652loixiyo
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.
December 28, 2021 at 11:09 am #2062005LeoStaffCustomer SupportHi 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 ๐
December 28, 2021 at 1:59 pm #2062169loixiyoHi 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.
December 28, 2021 at 4:42 pm #2062248LeoStaffCustomer SupportWould this option help?
https://docs.generatepress.com/article/content-container/#full-widthDecember 29, 2021 at 12:20 am #2062468loixiyoHi 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!
December 29, 2021 at 1:09 am #2062500ElvinStaffCustomer SupportHi 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
December 29, 2021 at 9:13 am #2063090loixiyoHi 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!
December 29, 2021 at 8:01 pm #2063480ElvinStaffCustomer SupportAnyway, 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. ๐
December 30, 2021 at 12:21 am #2063556loixiyoHi 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 :-).
December 30, 2021 at 12:27 am #2063561ElvinStaffCustomer SupportThe 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; } }
December 30, 2021 at 12:31 am #2063570loixiyoIt worked!
I can close this ticket now.
Thanks!
January 3, 2022 at 5:01 pm #2068210ElvinStaffCustomer SupportNo problem.
Happy new year! ๐
-
AuthorPosts
- You must be logged in to reply to this topic.