How to define different Blogger CSS properties for desktop and mobile view

You can control how your Blogger site's CSS properties apply between desktop and mobile view. This can be achieved by conditionally giving different CSS properties to a same class between desktop and mobile view.

Before doing this, make sure that the <body> tag of your custom template is the same as this:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Then, you can define different CSS properties for desktop and mobile view:

/* For desktop view */
.date-posts {
  margin: 0 -$(separator.outdent);
  padding: 0 $(separator.outdent);

/* For mobile view */
.mobile .date-posts {
  margin: 0;
  padding: 0;

References or Credits:


  1. To condition my mobile view with css, do I have to select custom templates or choose any of blogger predefined mobile templates?
    For my desktop view, I use a custom template

    Pls look into it and get back to me ASAP. Thanks in advance

    1. I would think it would apply for both.


Post a Comment

Thank you for visiting Almost a Technocrat. Due to many spam comments, your comment will be moderated.

Popular posts from this blog

How to recalibrate your Samsung Note 4 battery

How to import Tasker projects, profiles, tasks and scenes

How to turn your Windows 7 laptop or dekstop into a WiFi repeater or extender