Hi! I’m trying to add a grid that changes from two columns on desktop/tablet to one column on mobile. Here’s what’s happening:
When in the Webflow editor everything looks great. If I look at different previews everything works as intended and the grid updates as expected when I resize the window.
The mobile layout changes completely after I publish the site, but only on the published page (it still looks great in the Webflow editor). It looks just fine on desktop/tablet, but it looks awful on mobile.
When I open the read-only link I see the same mess I see on the published site. What’s confusing is that the same exact project shows me something totally different in my own editor.
I am unable to replicate this issue on my Samsung Note 20 Ultra, the locations display as per the design in Webflow designer. Here is also a responsive check on other devices for your site,
Thank you so much for your reply. That’s actually really interesting feedback. Every iPhone I test it on produces the error, but it looks just fine on your Samsung. I’ll try testing with other Android based devices to see if that’s the case. Thank you for checking!
@Orion, If you are previewing this on Safari, it could be because of how the position is handled in Safari.
What you could try is to put the google maps embed in a div block, say map-container and set the map embed styling (not the div styling but the map embed itself) as position: absolute; top: 0; bottom: 0;
Thank you again for your ideas! I have all the elements (addresses and maps) setup in a grid. All maps are in the second column, and I placed <div> blocks in those columns before placing the map elements inside those <div> blocks. I set position: relative on all the maps and set specific pixel sizes for the <div> boxes. From there I set a max height and width for the <div> boxes, and the maps appear to fit inside the containers (until I see them on Safari).
I attempted to change the position of the <div> boxes to absolute, but it pulled all the maps out of the flow and placed them at the top of the screen. When I look at how the page is rendered on Safari, it looks like the <div> boxes that hold the maps are being ignored. The maps are set to have a maximum height and width of their parent elements (relative positioning), but Safari seems to ignore it. Did I implement your suggestion incorrectly? Thank you again for your advice! Here’s an updated link if you care to take a look:
Edit: I should note that it’s not just mobile. If I view the page in Safari on a desktop I see the same issue with maps moving out of their <div> boxes.