CSS and html not rendering well on mobile

Question

I have a page i've created which works fine in a desktop but get's messed up in a mobile browser.

This is the mobile version. I have a header and a .container(the one with gray background) set to width 100%. Inside .container i've a .wrapper set to width: 900px; and margin: 0 auto;. Why is the blue background and the gray background rendering till about half of the page witdh? What is the best way I can approach the problem to create a page like the desktop version on the mobile as well?

Answer 1

I believe your wrapper may be causing the issue. Instead of setting a fixed width for the object do:

.wrapper {
    max-width:900px;
    width:100%;
    display:block; //for centering
    margin:0 auto // for centering

}

Should solve your problem and make the website more responsive throughout different platforms. Good luck! :)

NOTE

If you are not already doing so, take rajkumar's comment and add:

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

Answer 2

It's your wrapper and li width. Set them to percentages.

.wrapper {
    width: 90%;
    margin: 0 auto;
 }

 li {
    width: 30%;
    ....
 }

Answer 3

if you want create a site for both desktop and mobile..Try all width in percentage.because percentage only fit width automatically according to screen resolution.suppose you give in pixels the screen was not adjustable in all screen resolutions.its only fix according to your size only. In your case please make sure for all width in percentage. and also please conform the media type for get screen width in header section

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