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

Comments

  1. almost a technocratApril 21, 2013 at 7:36 PM

    You are welcome.

    ReplyDelete
  2. John AyoAugust 28, 2013 at 11:57 PM

    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

Post a Comment

Popular posts from this blog

City Code Table for Casio SGW300HD-1AV Watch

Image
This city codes are provided in the watch user manual but for the ease of references in the web, I put this table in this blog in case i wanted to refer to it using my smartphone. Hope you find this useful. Code City UTC/GMT offset (hours) WLG Wellington 12 NOU Noumea 11 GUM Guam 10 SYD Sydney 10 ADL Adelaide 9.5 SEL Seoul 9 TYO Tokyo 9 KUL Kuala Lumpur 8 HKG Hong Kong 8 SIN Singapore 8 BJS Beijing 8 PER Perth 8 TPE Taipei 8 BKK Bangkok 7 RGN Yangon 6.5 DAC Dhaka 6 KTM Kathmandu 5.75 DEL Delhi 5.5 KHI Karachi 5 KBL Kabul 4.5 DXB Dubai 4 THR Tehran 3.5 JED Jeddah 3 DOH Doha, Qatar 3 MOW Moscow 3 BGW Baghdad 3 HEL Helsinki 2 ATH Athens 2 ANK Ankara 2 ...
Read more

How to force only 4G or LTE network connection for Samsung Galaxy Note 4

Image
This is how to enable Samsung Galaxy Note 4 to force use only 4G (LTE) network connection for high speed internet data. There is a built-in switch in the smartphone that will enable the smartphone to force use only either 3G (WCDMA) or 2G (GSM) network connection but, there is no switch at all to enable the smartphone to force use only 4G (LTE) network connection. Video Tutorial This is screen video record to show you how to do it. If you prefer screenshots, please skip this video and scroll after the video. Screenshots Tutorial If you are clueless about the existing settings that enable you to switch network mode, goto “Settings > More networks > Mobile networks > Network mode”. Steps: Step 1 : From the phone dialer, dial *#2263# and the smartphone will bring you into the “Service Mode” screen like below. Step 2 : Select “[4] LTE BAND PART1 []” and the smartphone will bring you into a screen to select the types of LTE mode. Step 3 : Select “[1] LTE ALL []” to force the smartp...
Read more

Mounting NFS share directory from D-link DNS 320L on Ubuntu 12.04 LTS

Image
Seems like the steps on how to get the NFS mount point from the D-Link DNS 320L NAS server were not properly documented in their user manual. After setting up and enabled the NFS service on the D-Link DNS 320L NAS server, I went ahead to setup and mount the share directory/folder in Ubuntu 12.04 LTS assuming the mount point in NAS was /Volume_1/... but that is not the correct mount point to start with! Found this answer from D-Link forum post from a member (ba43123) that helped me to correctly mount the NFS share directory/folder on Ubuntu 12.04 LTS: After spending most of the last hour on the phone with D-Link Technical Support, I came away with the recommendation to take my Mac (which has successfully connected to a number of NFS shares in the past) to Apple to determine if the network settings for NFS are correct.  This is mostly due to the fact that the people who are taking the calls have no information about NFS in their scripts and Knowledge Base so they are at a total loss...
Read more