Responsive Blogger Template Not Showing Up On Mobile? Here Is The Simple Solution
You are here:Home » Web Development » Responsive Blogger Template Not Showing Up On Mobile? Here Is The Simple Solution

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.

 

mobile-friendly-template-settings

 

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.




3 comments:

  1. Thank you Rakesh! Glad to hear that from you :)

    ReplyDelete
  2. A GOOD TIP YOU SHARED THERE..
    KEEP IT UP

    ReplyDelete
  3. Hi Ejiga,


    Glad you foudn it helpful. Welcome to AmfasTech! Keep visiting back!


    Have a great day :)

    ReplyDelete

We're happy to read your thoughts and we'd try our level best to clear your queries if asked. Let's discuss it in a better way. Please don't spam and spoil the conversation :) Thank you!!