How to add spacing on site for mobile and tablet visitors By: Vladan | under: HTML/CSS | September 21, 2011 | Tags: CSS trick | One comment
Sites that are made with fixed width looks normal on computers. For last couple of years resolutions on computers that are higher than 1024×768 are over 80%. So if you have website with 960px width everything is normal if you looking on computer.
Also in last couple of years there are significantly more users that will visit your website with mobile phone or tablet device. As all we know that devices don’t have resolution wider than 1024px so the websites on those devices are reduced to fit on screen. In that case websites are smaller and without left and right space so reading can be a problem for some persons, and from visual aspect they are not nice.
There is no need for JavaScript or special CSS just for tablets and phones. All you need to do is to give some space in CSS. Here is how to do this:
#container {
width: 960px;
margin: 0 auto;
padding: 0 10px 0 10px;
}
In this case container is div element that wrapping whole site.
In some cases you will need to add spaces on several elements if your site have for example header and footer that are 100% wide. In that case we can have HTML structure like this:
<body>
<div id=”header”>
<div class=”header-holder”>
Enter some code here
</div>
</div>
<div id=”container”>
Enter some code here
</div>
<div id=”footer”>
<div class=”footer-holder”>
Enter some code here
</div>
</div>
</body>
CSS will look like this:
#header {
width: 100%;
}
.header-holder {
width: 960px;
margin: 0 auto;
padding: 0 10px 0 10px;
}
#container {
width: 960px;
margin: 0 auto;
padding: 0 10px 0 10px;
}
#footer {
width: 100%;
}
.footer-holder {
width: 960px;
margin: 0 auto;
padding: 0 10px 0 10px;
}
One Comment
hey how do you come up with this stuff lol. btw have you heard of this guys linkwheels, one pushed my blog up like 20 spots.