Why is the preview completely different from what the actual published website looks like on different devices? I understand my website's layout isn't optimal for every dimension, but basic things like my mobile preview don't match what my published website looks like on my mobile device (Iphone 5).
Considering it looks fine in my mobile media query preview, I have no idea where to begin addressing the issue.
Here is a read-only link to my website: https://preview.webflow.com/preview/speak-your-mind?preview=61ebb6840fed9cef423000e1efcf5e7f
If you look at the website speak-your-mind.webflow.io on a Iphone 5, the layout is completely smushed and broken.
Also on my 11.6 chromebook and my friends 13.3 inch laptop, the layout isn't as intended. The margin styling I added to vertically center my elements within each section (as much as possible) doesn't appear to translate well on those devices, more times than not the elements hug the bottom of their containers when I want them as close to vertically centered as possible.
There are other issues (the menu button for tablets and mobile devices looks odd), but I can address those issues later.
Devices I am testing on include (all chrome browser):
13.3 hp laptop
Iphone 3 (this on actually looks good!)
I know its a lot here, but thank you in advance!