Responsive Blogger Template Not Showing Up On Mobile? Here Is The Simple Solution

A responsive template should blend your blog’s layout mobile friendly. It should cuddle itself within the screen size and give the user an uninterrupted experience.

 

Many bloggers who had their blogs on ‘blogger’ platform, though installed responsive templates, couldn’t get it displayed on medium and small screens.

 

The reason for this glitch is caused due to two major reasons.

1. No responsive code related to the size of the screen you are using.
2. Wrongly setup settings in your blogger dashboard.

1. ‘No responsive code’ issue:

This occurs because of the lack of necessary code to blend the layout according to some sizes of the screens.

 

Solution: There is an easy solution for this problem. Simply add the screen resolutions in the media screen CSS rule. You can use the following abstract responsive code in your template if you want.

 

media screen and (max-width:524px){

/** YOUR LAYOUT CODE HERE **/

}

media screen and (max-width:720px){

/** YOUR LAYOUT CODE HERE **/

}

media screen and (max-width:1080px){

/** YOUR LAYOUT CODE HERE **/

}

media screen and (max-width:320x){

/** YOUR LAYOUT CODE HERE **/

}

media screen and (max-width:480px){

/** YOUR LAYOUT CODE HERE **/

}

media screen and (max-width:620px){

/** YOUR LAYOUT CODE HERE **/

}

media screen and (max-width:800px){

/** YOUR LAYOUT CODE HERE **/

}

media screen and (max-width:960px){

/** YOUR LAYOUT CODE HERE **/

}

 

 

You can also add up any screen size and add the respective layout code.

 

*Layout code – Nothing but the code consisting of header, body, sidebar, footer and other elements of the template.

 

2. Wrongly setup settings

This is one of the silly reasons why bloggers even change templates without checking. Sometimes, even having a responsive template installed on your blogger blog, you can’t see it rendering properly on mobile screens.

 

This is because you might have left the setting to default. Let’s take a tour of template settings in blogger and see how effective they can be.

 

 

Selecting ‘Yes, Show mobile template on mobile devices’ will show the mobile version of the template. You can only select some simple pre-existed blogger templates if this option is selected. No responsive template is effective here.

 

Selecting ‘No, Show desktop template on mobile devices’ will show up desktop template on small screens. As the blog is already installed with responsive template, it will automatically render properly from now on.

 

Hope it helps! Share your thoughts about it.