Why you Disable Blogger Mobile View? because you already choose a well Responsive Template which is best suitable for your audience. But blogger comes with default mobile template which is not attractive or visual design looks older. Due to this default view all the design burst or you will see just text version also image goes out of the boundaries and showing a scroll bar horizontally which is a bad practice for any responsive design also google will not show in search result a mobile friendly website. Which break apart your blog and showing only text version without any visual design. Which may cause downfall in ranking.
To show your own responsive and visual design, you must need to Disable Blogger Mobile View so your responsive design will work properly.
Related: Remove Blogger Default CSS and JS
I will show you an extra method, if your design is not showing properly.
Check my Portfolio build using Blogger and Bootstrap 3.
Disable Blogger Mobile View Without Code
Let’s get start and tackle this problem step by step.
- Login into your Account. Click on Template at the left sidebar of your blogger. Now you will see two templates. One for Normal Desktop Version and other for Mobile respectively.
- At the small template (screen look like mobile) see there is Gear Icon. See Screen Shot.
- A small screen showing you couple of Options which lead you to select either which template you want to show. Select the Radio button which says “No, Show desktop Template on Mobile Devices”.
That’s it, Now your Blog readers will see your Desktop Template. Once you Disable your mobile version. But when it comes to Bootstrap 3 and your template is not showing responsive characteristics, then you need a little bit of code implementation. Which i tackle after digging some codes.
Bootstrap 3 Not Working on Blogger
If you are using Bootstrap 3 and it’s not working well or is not changing into responsive then add View-port Meta.
- Go again to your Dashboard.
- Click on Template at the left hand sidebar.
- Click on Edit HTML. Search for this line.
<meta expr:content='data:blog.isMobile ? " width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" : "width=1100"' name='viewport'/>
- Replace this line of code with this.
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
- That’s it save your template and Enjoy your responsive design if any thing happen then comment below.