Making your site mobile friendly is becoming more and more common in the web design world as mobile use increases around the world. While responsive design or separate mobile templates are currently the best ways to make your website fully compatible with mobile devices, sometimes you just need to make your non-mobile site look better on your user’s phones.
One issue many mobile users will see when they visit a website is that if they zoom in on a page with their device and then scroll around, the background images often do not stretch out to fill 100% of the page. They will usually just stay the width of the user’s viewport. As long as users don’t scroll around, a website might look fine but when users start scrolling around, the site will look wacked out.
The fix for this is really simple: in your CSS file, simply assign a min-width property to the body element like this:
body {
min-width: 960px;
}
The 960px value should be changed to match the width of your site’s wrapper or content.
Now your non-mobile site can be a little more mobile friendly!
