CODEWITHSUNDEEP
javascripthtmlcssmobileweb
cdMinix
cdMinix

Reputation: 675

mobile version of website doesn't fit horizontally

I'm trying to produce a mobile version of my website, but have encountered one problem:

The the whole website fits properly on the computer (with an example browser width of 480px) but leaves space on the right when viewing on my mobile phone (regardless of the browser I used). So the whole site looks good, but you can scroll "out of the website".

I first tried to disable horizontally scrolling, so I included this line:

<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />

To disable the (still scrollable!) space on the right I added this to my "mobile.css": It worked on the computer, but not on my mobile.

body{
width: 100%;
overflow-x: hidden;
}

I have tested the website on following mobile browsers:

I originally wanted to avoid Javascript, but if there is a javascript solution, please don't hesitate to post it!

Upvotes: 0

Views: 1047

Answers (1)

ralph.m
ralph.m

Reputation: 14345

If you want your layout to be mobile friendly, it's best to be thinking about this right from the beginning. So, for example, if you are going to set fixed widths on elements (which I don't recommend), such as—

#back-menu-left {with: 500px;}

you need to ask yourself what will happen to this on a small screen. So, either don't set that width, or immediately write an @media rule to override it on smaller screens.

(I didn't check through the rest of your code, just stopping when I found one oversized element. Best to check and see if there are any other overwide elements like that.)

Upvotes: 1

Related Questions