How to Hide and Show Different Blogger Content on Mobile and Desktop

Hey Bloggers! Do you like to eat rice daily? Obviously not. Then why are you showing same content to mobile users and desktop users. I mean you should try to change the content for mobile users. It is very easy and simple method to hide different blogger content on desktop devices and show blogger content on mobile devices. Yes you heard right. In this article we will talk about how to hide and show different blogger content on mobile and desktop. May be you are confusing what I am asking, so here is the example see image below. 

Most Important: You can do this in any post or any widget. Now follow these simple steps to hide mobile content on desktop and hide desktop content on mobile.

You may like: How to Show any Widget on Mobile

First Part HTML

We will create html code for this purpose. We can add these codes in any post or pages and in any widget.

<div id=”content-desktop”>

This is the content that will display on DESKTOPS.

</div>

<div id=”content-mobile”>

This is the content that will display on MOBILE DEVICES.

</div>

When we will use content-desktop then the content will not show on mobile. If we will use content-mobile then the content in this code will not show on desktop.

Second Part CSS Code

Now its time to add some css code for the working of this div id html code. What you have to do just follow these steps:

• Go to blogger
• Click on theme
• Click edit html
• Expand all codes
• Now press Ctrl+F
• Type ]]</b:skin> and search
• Now before this code add these css codes

#content-desktop {display: block;}

#content-mobile {display: none;}

@media screen and (max-width: 768px) {

#content-desktop {display: none;}

#content-mobile {display: block;}

}

• Save theme and enjoy

Important Note: Now whenever in any page or in any post or in any widget you will use html codes they will work. It depends on you what you want to show on desktop and what you want to show on mobile.

Watch this tutorial in urdu

If you like my work please share it with your friends. If you have any query or any request for making any video or article please submit it. See you again!