css - Width cut off on mobile, works resizing desktop browser -


i developing website desktop , iphone 4 viewport. when doing bulk of development , viewing through desktop's browser using viewport chrome extension, rendered fine , looks good. when view on iphone 4s width corrupted. have no logic tells act this. cannot see issue is, wondering if think of possible problems?

desktop (at 320 viewport): -----

enter image description here

iphone 4s:

enter image description here

query used .container{} class wraps entire site.

.container {  text-align: center;   margin-left: auto;  margin-right: auto; } @media (min-width : 320px) {     .container {         width:75%;     } }

many help.

you have 2 problems @ work here unrelated .container. why think this? menu showing nice , large other content isn't. said .container wraps everything. shouldn't seeing discrepancy there.

so, you're 2 problems related to:

  1. you're missing meta tags in <head>. looks media queries seem working you, scale off. try adding in <meta name="viewport" content="width=device-width, initial-scale=1">
  2. your menu styles. have set size? there media query that's adjusting it?

without seeing menu styles, can't wrong there...


Comments

Post a Comment