Question

I used to start my work using html5-boilerplate instead of creating file from scratch. It is awesome for responsive web design.

I am developing a non-responsive website and client needs desktop version for mobiles too (remember how websites opens on mobile few years ago).

I did not make it responsive and do not add any styles in media queries.

I works fine on desktops but when we see the website on a mobile device(or less 940 px wide screens) it does not show complete backgrounds of full width containers(i.e. 100%) instead it only show the background according to width of device.

I am not sure but I think there is problem in following code which is meta viewport:

<meta name="viewport" content="width=device-width" />

I removed this code and test the website but problem remains. Can any one please tell me the solution?

Note: I have build the most of site and now I can not write markup from scratch.

Was it helpful?

Solution

I have found an easiest possible solution to this and its working for me. I just added following code into CSS file (my media query section of at bottom of main.css in case html boilerplate).

@media only screen and (max-width: 900px) {
    /* Style adjustments for non responsive websites */
    body{width:940px;}
}

OTHER TIPS

Try changing it to the following:

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

Let me know if it works!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top