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:
http://code.blogger.com/2011/11/introducing-custom-mobile-templates.html

4 comments :

  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
    Here http://Naijasniffer.blogspot.com

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

    ReplyDelete
    Replies
    1. I would think it would apply for both.

      Delete

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