How to make a Responsive Blog Theme
With the increasing number of mobile devices like smartphones, tablets, netbooks it is necessary to have Responsive Design for your Blog if you don't want your visitor zooming in and zooming out of the webpages to read.
A Responsive Design results in a Webpage or Website which is easier to navigate through and easy to read.
A Responsive Design results in a Webpage or Website which is easier to navigate through and easy to read.
Why Responsive Design?
Consider a webpage made for viewing on computer. It uses a Cascading Style Sheet(CSS) for defining its design. When we open same web page on Mobile or tablet, it will still use the same CSS. But since the screen size is significantly small it will give an unpleasant experience to the viewer.
To tackle this situation we follow the Responsive Design approach.
How does Responsive Design work?
It uses the CSS property called @media which lets you check the screen resolution(screen width) of the viewer.
How does Responsive Design work?
It uses the CSS property called @media which lets you check the screen resolution(screen width) of the viewer.
By checking the resolution of the viewer it will be apparent whether the viewer is using a computer system or a mobile phone and there we will make it so that the CSS property accessed are dependent on the resolution of the viewer.
Practical.
@media all and (min-width: 1020px){
.container
{
width: 1020px;
margin: auto;
}
.primary{
width: 70%;
float: left;
}
.secondary{
float: left;
width:30%;
}
}/* media all and (min-width: 800px) and (max-width: 1020px) */
@media all and (min-width: 800px) and (max-width: 1020px){
.container
{
width: 800px;
margin: auto;
}
.primary{
width: 70%;
float: left;
}
.secondary{
float: left;
width:30%;
}
}/* media all and (min-width: 800px) and (max-width: 1020px) */
@media all and (min-width: 100px) and (max-width: 640px){
.container
{
width: 100%;
margin: auto;
}
.primary{
width: 100%;
float: left;
}
.secondary{
float: left;
width:100%;
}
}/* media all and (min-width: 100px) and (max-width: 640px) */
This covers 3 types of views which are ones with width 100 to 640px which will cover almost all phones and some tablets, and others are ones with 800px to 1020px wide display and 1020px and beyond.
