Design looks weird on phone

HTML & CSS
1

Hello everyone,

It has been a while but I searched my old design and am renewing it so it can be used again.
I noticed that my design on the phone is to long. ( not the page design but the page itself somehow. )

I looked into inspect mode but could not find the issue there.
Could somebody throw some suggestions where I should look ?

Here the picture on my laptop and one from my phone.

1280×774 149 KB

1080×1920 103 KB

Best regards,
Wouter.

2

Hi,

Unfortunately we can’t debug from pictures and would need the html and css that you are using for your display.

When you say the design is too long for your phone I’m not sure I understand what you mean because the picture you sent seems to be showing it as not wide enough?

I assume you have the meta viewport tag in place correctly:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

If the site isn’t live then we would need a codepen that exhibits the problem or at least the full css and html to inspect and see if we can spot what’s going on. :smile:

3

Yeah I know.

When I say it’s to long you can see on the phone picture that I scrolled through while normally you wouldn’t.

I have the correct view tag in place yes.

4

Codepen wil follow up.

5

Hi,

I’m not sure if this is the issue to which you are referring but your mobile nav icon is 150% wide thus pushing outside the mobile viewport and making the rest of the screen smaller.

You have offset the mobile nav with a left margin but the item is floated and 100% wide and therefore too wide for its container.

You should just have used auto margins and no floats.

e.g.

@media screen and (max-width:600px){
  
  .nav-wrapper .row .col.offset-s5{ margin-left:0 }
  
 .nav-wrapper .col.offset-s5 a{ 
  float:none;
   margin:auto;
   display:table;
  } 
}
6

I will check that out tonight if that’s the problem.
Ty for the heads up.

So I should get rid of the s12 ?

7

I’m not familiar with the framework you are using but the code I used above sorted out the problem when I added it into the page.

If you add a margin-left offset to an item then that item can’t be 100% wide of the parent as that will push things wide.

8

Paul, Thank you again for you smart thinking.

I should have seen that but I didn’t.
But I changed it and now the website looks good on mobile and browser.
Never thought I would see my old layout being re-used for my new website haha.

9

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