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
@media screen and (max-width : 800px)Do change the max-width property and add the CSS like a normal style sheet like I have done below
{
STYLE GOES HERE
}
@media screen and (max-width : 800px)If you will do the same with all the major sizes,the site will be shown according to your wish.
{
.post
{width:100%;}
}
Post A Comment:
0 comments: