How to make Blogger template Responsive & mobile friendly

ads space

How to make blogger template responsive

You are thinking How are Responsive Layouts Designed. For me it's very simple to design responsive blogger template. In fact every template can be changed into responsive template. The only thing you need to know is HTML and CSS. If you know both ,  then it will be very easy to make your template responsive.

Every template can be made responsive in just 2 simple ways which are: 

1. Meta viewport.
2. @media queries.

Normally browsers opens Webpages in desktop view. It is OK to view Webpages in desktop but when you open your Webpages in mobiles and low resolution screens, it becomes very hard to read and click on links. You have to zoom every time you want to read a portion of Webpage. To overcome this situation we need to help our browser in detecting device-width which is done with metaview ports.
Meta viewport helps in detecting device width for the browsers. Now the next step is to add media queries. In media queries we use custom CSS for different screen sizes. Media queries acts as the conditional if else tags for the browsers. Example. For desktop view you set 3 column view and for tablet you use 2 column view and similarly you use single column for mobile phones. Now when a person opens your website,  then the browser will detect screen size with the help of meta viewport and then will call appropriate css for that device. To make your website responsive you need to follow two basic steps which I will explain below.

Step by step to make responsive templates.

Step 1:  add meta viewport just below the tag of your blogger template.

Step 2: Add media queries to your css file.

/* Laptops & Desktops */
@media only screen and (max-width : 1280px) {
/* css here will be rendered if and only if device width is less than 1280px */
}
/* Tablets 1024px */
@media only screen and (max-width : 1024px) {
/* css here will be rendered if and only if device width is less than 1024px */
}
/* Tablets 768px */
@media only screen and (max-width : 768px) {
/*  css here will be rendered if and only if device width is less than 768px */
}
/* Phones 640px */
@media only screen and (max-width : 640px) {
/*  css here will be rendered if and only if device width is less than 640xpx */
}
/* Phones 480px */
@media only screen and (max-width : 480px) {
/* css here will be rendered if and only if device width is less than 480px */
}
/* Small Mobiles 320px */
@media only screen and (max-width : 320px) {
/* css here will be rendered if and only if device width is less than 320px */
}

Helpful Tips:

1. Always Use percentages in writing CSS values instead of numeric values to define width of columns. This will make your template highly responsive.
2. Always use  max-width, box-sizing, and min-width properties.
3. Use css like below and only make changes with percentages.

@media only screen and (max-width : 320px) {
.sidebar{ width: 100% ; float: none; }
}

4.  If you want to hide any particular section just use Display:none; in the css.

Note: there are many breakpoints for media queries but here I show only common breakpoints that are sufficient for every type of device width. You can see my template which is highly responsive and I use only these media queries.

How to enable responsive template for blogger mobile.

If you successfully followed all the above steps then it's time to activate your responsive template for blogger mobile view.

Step 1: Go to Blogger Dashboard.
Step 2: Click on Template.
Step 3: You will see a gear icon in mobile template. Click on that icon.
Step 4: Now you have to select " Custom ”
Step 5: Save all the changes.

How to make blogger template mobile friendly without editing template and media queries

If you find about method difficult or you don't know how to use media queries with css. Then you need to use this method to make your blogger blog mobile friendly.

Step 1: Go to Blogger Dashboard.
Step 2: Click on Template.
Step 3: You will see a gear icon in mobile template. Click on that icon.
Step 4: Now you have to select “Yes. Show mobile template on mobile devices.”
Step 5: Save all the changes.

ads space