Mobile madness, not sure how to fix my website

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.

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.
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!)

I know its a lot here, but thank you in advance!

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%)?

Hi DJBrandoK,

Just checked http://speak-your-mind.webflow.io/ on all my devices here are the results:

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 :smiley:)

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.

Regards
Ahmad

I use fix heights & width so i have no issues working with pixels
there are many units to choose from i recommend you read this: CSS Units

If you need any further assistance feel free to private message me

Awesome, I appreciate your help thus far. Not sure what you mean by containers with fixed px heights, both the sections and containers are in %.

I tried to build it initially with fixed pxs, but when I checked the responsiveness, all my elements started to smush together.

Sorry i thought it was in pixels

So these are a few things you can fix:

  1. Your Body Home has a 100% height is there a purpose for it i have never used it
    ( not really a fix just curious :smiley: )

  2. I recommend you make your nav bar a fixed height and than take that height and add it to the top margin for the hero section

  3. I noticed your using margin auto top & bottom on hero container 1 but not 2 there is no need for margin auto

  4. Start using padding in your containers so your content does not cut out like this: Screenshot - 593f414f1b0b140a04356d93ddd3ede5 - Gyazo

So just applying these changes is given a better result

Before: Screenshot - eaf5748918a7c96715aeee077e9a4126 - Gyazo
After: Screenshot - 04f035e27bf5fe8316116b445b000e00 - Gyazo

I did not change the size on the after picture just had to zoom out to fit the text :slight_smile:

Hope this helps its almost 4am here better go to sleep

Regards
Ahmad

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 :smile:. 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 :blush:

Hey DJBrandoK

Glad to hear that my suggestions worked :slight_smile:
If you want to get back to be a experienced coder i would recommend you to
check out http://www.w3schools.com/

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.