Why Blogger Mobile Template Not Work?

Google Blogger shows blog pages with mobile CSS on mobile devices unless you change it disabled. You can see next figure by clicking mobile setting button on Template page.

Since I want to change CSS and I remember there are some CSS elements starting with '.mobile', I open the template editor and edit as I want. And open my blog in my smart phone.

Nothing changed.

Try again. Take it easy. Nothing again. Delete Cashed and reload it. Same. I see the codes carefully, but useless. I read some pages for editing mobile CSS for Blogger. Useless.

But I missed something because I thought I almost knew about it. Stupid.

For editing and applying mobile CSS on blogger, the mobile template should be chosen as 'custom' in mobile setting popup. I thought 'default' was just default and  I never thought to change the template. Stupid! Since all mobile templates - default, travel, dynamic view, and any other template excepting custom template are loaded from Google or Blogger server ignoring users template, my efforts went nothing.

After changing mobile template to custom, you can edit mobile template section that should be starts with next code snippet and it will make change of your blog view.

/* Mobile

----------------------------------------------- */

body.mobile  {

  background-size: $(mobile.background.size);

}

If you want to override CSS element for moblie web, usually, it can be done to make the CSS element starting with '.mobile' like this.

.post-body {...} // web version

.mobile .post-body {...} // mobile version