Making the theme responsive
Uptil the previous post we had completed a theme wtih a sidebar and a footer. Now if you might not have noticed that our theme's images and sidebar breaks in the smaller screens. So here we are going to make our theme responsive.
To do so we will use
To do so we will use
@media (min-width: 1200px)
.container {
width: 1040px;
}
This is used for the browser to distinguish which CSS is to be used.
We will simply add
We will simply add
@media (min-width: 1200px)
to our container, body, main, sidebar and if you are using my version primary and secondary tags instead of main and sidebar respectively.
I used this
@media all and (min-width: 1020px) and (max-width: 4080px){
.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 for which I used 4080px.
Also I removed the padding of 20px I added to container in previous posts because it was causing problem with the page(scroll was appearing).
Download the responsive Blank template for Blogger from below.
Download link: https://drive.google.com/open?id=0B8Qb2-H0P8xIR19aVFFxYzJ6WG8
Download link: https://drive.google.com/open?id=0B8Qb2-H0P8xIR19aVFFxYzJ6WG8
