You Are Here : Home » , » How to Make Your Blog/Site Responsive

How to Make Your Blog/Site Responsive

You should be familiar with the responsive web design until now. Many blogger and web designer likes responsive design and they wanted to implement responsive design to their blog and template. It has become an integral part of web design. You have designed a blog template that looks awesome but the problem with that is it may not look good on lower screen size. You know now a days most of the users like browsing the web with their tablet, laptop, ipad, smart phones which is compact and easy to handle. Most users don't like to use PC. Now to make your blog or website to fit on all gadgets and devices you will either change the width that will look good on all screen size. But it may not be good idea to compromise with your Blog design. In that case you can apply responsive design to your Blog. CSS3 made it more easier to implement responsive design to website or blog. Today, I will make you familiar with responsive web design and I will show you how to make your blog responsive. And if you are a Blogger user I will provide you step by step procedure to add these style sheet in your Blogger blog. Let's start the post further.

How to Make Your Blog Responsive
As I said Responsive we design has become an important part of web design. Let's say the sidebar of your blog have 300 pixels resolution. You know with the help of CSS3 and responsive design you can tell browser to show 250 pixels sidebar on lowers screen size devices ( say 800px.). It will allow your users to easily navigate your Blog. If you blog or site is not responsive than it will be quite irritating to use scrollbar to scroll your blog to check out your blog. See the CSS below to apply responsive design to your blog or site.
@media screen and (max-width: 800px) {
background-color: gray;
}
The above CSS3 will check the screen width and if the width of the screen is atleast 800 pixels or less than it will apply background color gray. Say you have blue background in your site than the browser will check the screen width and if it is 800 pixels or less than it will apply gray background in place of blue color. Like this you can apply different width and size to your site on different screen sized devices.

If you found the above steps little difficult to understand than this one can help you. Let's say you have a blog with 400px right sidebar, 1000px header wrapper, 600px main wrapper and 1000px content wrapper. And let's assume that you want 200px right sidebar, 800px header wrapper, 400px main wrapper and 800px content wrapper to appear on screen size which have at least 800 pixels width. Now see the CSS code below the image of basic layout of a webpage to know how to apply this responsive design to your blog.

How to Make Your Blog Responsive
@media screen and (max-width: 800px) {
.right-sidebar {
width:200px; }
.header-wrapper { width: 800px; }
.main-wrapper { width: 400px; }
.content-wrapper { width: 800px; }
}
Above given CSS code will tell browser to check screen width and if browser the screen size 800 pixel or less than it will apply these styles to that device for the specified element. See the above CSS code again. Text highlighted in red is the name of the element. You will have to find the element name used for the sidebar, header-wrapper, etc. If you are a Blogger user than you would like to read how to find Blogger widget ID. And at the same time take a look at my post on editing website live in browser screen. If you are getting difficulty on finding the id or element name than you can use inspect element feature of your web browser to know the element name and apply responsive design to your blog.

Let's understand and discuss more about the use of CSS code for responsive design. You can use these CSS code to apply designs to different screen size devices. See the CSS code given below carefully.
@media screen(min-width:700px) and (max-width:800px){
.right-sidebar {
width: 200px;
}
background color: black;
}
Let's understand the above CSS code. Above code will tell browser to check the screen size of the monitor and if it found it 800 pixel than it will apply 200px right sidebar and black background to the site. You may be wondering what (min-width:700px) do in the above CSS code. Actually, (min-width:700px) will tell browser to check the screen size for 700px. Now with the use of above CSS code the browser will apply these responsive design only if the screen size is between 700px - 800px. It means it will not apply any changes t the devices which have less than 700 pixel screen size and the one which have more than 800 pixel screen size.
In case if your blog is optimized for lowers screen size ( say 800 pixel or less) than you can use the below given CSS code to apply the changes only when the screen size is more than 800 pixel.
@media screen (min-width:800px) {
.right-sidebar { width: 300px; }
background: blue;
}
The above CSS code will check if the screen size is more than 800px. If the screen size is found to be 800px or more than that then it will apply these styles to site which is browsed in screen size more than 800 pixel.
Well we have finished understanding the responsive web design and how to implement responsive design to your blog or website. You may also want to know if I use responsive design in my site and the answer will be no. I don't like using responsive design on this blog but to make you understand about responsive design I have applied responsive design to this page. I have two design on this page. One is for screen size less than 950 pixel and the second for more than 950 pixels. I found that this page best fits on screen size which have at least 750 pixel and the mobile template will be shown on mobile devices. You can see below the changes that I have made to make this web page responsive.
  • At First I made changes to my header wrapper to make it fit well on lowers screen size.
  • Then I made changes to the width and design of my navigation bar.
  • I also have to make changes on the subscription box which is below the navigation bar. For the subscription box to look well on lower screen size I have to change the width of place holder ( where you write name and email), change the font size and size of the social media icons. You can see these differences on changing the width of browser screen or browsing this page on lowers screen size devices.
  • Make changes to main wrapper, content wrapper ( place were sidebar and main wrapper are kept) and sidebar.
  • Made changes to my social sharing box which is located after post.
  • Size of the comment box.
  • And lastly I made changes to my footer area.
  • You can see all the changes by re-sizing your browser window or browsing this page which is less than 950 pixels wide.
That's All! I hope you have now learn something about responsive web design. You may not get responsive web design on first time. Just keep editing and changing until you get desired look. You can also apply these CSS codes on browser screen and see changes without fearing about errors on your site.
Enjoyed reading this post on making your blog and website responsive! Take a little time to share this to your friends.

Ads by Google
If you enjoyed reading this article then please leave a comment or subscribe to our newsletter to get all the future posts delivered to your feed reader or you email desk.

No comments:

Leave a Reply

Welcome to SpicyTweaks.

Copyright © 2013-17 SpicyTweaks. All Rights Reserved.

Scroll to top