Hello,
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.
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.
d tablets.
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):
1280x1024 screen
1920x1080 screen
11.6 chromebook
13.3 hp laptop
Iphone 5
Iphone 3 (this on actually looks good!)
Most of my styling involves using margins to vertically center elements within the containers. Would my website be more responsive if I decided to use relative positioning (via %) instead (i.e. top: 50%)?
Laptop 1366*768 (Chrome Windows 10) Looks almost the same as the preview shown inside the WF designer. 5px here and there but nothing major
Laptop 1366*768 (Edge Windows 10) Im amazed how the spacing is even better than what is shown in the WF designer. No complains here!
Laptop 1366*768 (IE 11 Windows 10) Looks the same as it looks on edge but feels more fluid then even chrome (I wonder why i thought IE sucks )
Ipad Mini 3 1536x2048 (Safari IOS 8.4) No Issues here looks better than the designer preview just like edge.
Ipad Mini 3 1536x2048 (Chrome IOS 8.4) Just like chrome on windows 10.
One Plus Two 1080x1920 (Chrome Lolipop) Copy of what the mobile view in the WF designer shows.
I also find it odd that your section height is in percentage and your container height is in px.
I am about to go to sleep when i get up in the morning i will look into it further.
Sleep tight! I made the changes you suggested and it looks fantastic! Obviously there are things here and there that need to be tweaked, but layout wise it’s looking great on all my devices. Suggestion 3 & 4 had the greatest effect, but the navbar suggestion was also very helpful.
As for 100% body, I removed that style. Not sure why I had that . Must have set it when I first began and forgot it.
I learned a little bit of coding several years ago and am getting back into it. As you may have noticed I’m extremely rusty