My preview and read-only link show two totally different layouts

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.

What am I missing??? TIA!!!

Here is what I see in my editor:

And here is what I see when I publish the site or when I view the read-only link:


Here is my site Read-Only: https://preview.webflow.com/preview/pnw-bestforautism?utm_medium=preview_link&utm_source=designer&utm_content=pnw-bestforautism&preview=28b4a4cf60131f34240da78f224f7ba8&pageId=5da975951e9c2ca3bf8a0f7b&mode=preview
(how to share your site Read-Only link)

Anyone out there care to throw a dog a bone? :laughing:

Hey @Orion,

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!

It looks like this issue only happens on iOS mobile devices. Has anyone seen that issue before?

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

https://preview.webflow.com/preview/pnw-bestforautism?utm_medium=preview_link&utm_source=designer&utm_content=pnw-bestforautism&preview=28b4a4cf60131f34240da78f224f7ba8&pageId=5da975951e9c2ca3bf8a0f7b&mode=preview

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.

Hey @Orion,

Your position: relative on the div container is fine, but set the map embed to position: absolute and alignment to full as shown here:
image

This positions the map embed in accordance to your container.
Hope this helps!