Blogger Ever

Add CSS into your style sheets for different screen sizes

Add CSS into your style sheets for different screen sizes

CSS is the only way to make your site for different screen sizes.But before moving on let me tell you that Blogger also provide a mobile ready template for your blog and if you want to implement your made design for mobiles and tabs then first disable that feature.

Responsive Design

Add CSS into your style sheets for different screen sizes (Current Post)

To disable that feature please follow the steps below.
  • Go to Template in your Blogger
  • click on the icon highlighted.(in below picture)

  • Then select "No. Show desktop template on mobile devices."
  • Click save.
Now you have successfully disabled that function now you can add your CSS in your template.But before that add the following line just after <head>.
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
It will read the screen size and show the specific style.As I've told in previous post that there are mainly 3 sizes are considered as shown
  • 800px
  • 640px
  • 320px
To create CSS for each of them use the following format (following is the example of 800px)
@media screen and (max-width : 800px)
{
STYLE GOES HERE
}
Do change the max-width property and add the CSS like a normal style sheet like I have done below
 @media screen and (max-width : 800px)
{
.post
{width:100%;}
}
If you will do the same with all the major sizes,the site will be shown according to your wish. 
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.