How to Show Different Content for Mobile and Desktop

Updated: May 1, 2023

Every website is different. So when you hear a general rule about web design, always understand that there are going to be exceptions. This includes advice that I give myself!

For example, I’ve often talked about responsive design on the NameHero blog, and the importance of having a site that gracefully adapts to small screens instead of having separate “mobile sites”. Ideally, you’d have just one content that displays everywhere and gracefully changes according to the layout. But sometimes you need to show different content on mobile and desktop.

Conversion Concerns

One situation where you might want to show different content to mobile users, is if one type converts better than the other.

Let’s say you have a button that works beautifully on a desktop, but as soon as the screen shrinks beyond a certain size, it either doesn’t adapt well, or the new shape of the button isn’t as appealing. The end result, disparate conversion rates on mobiles and desktops.

We can solve this by showing different content to different user categories.

Featured Snippet Concerns

The size of Google’s featured snippets leans more towards mobile display than desktop displays. For example, on my site WP-Tweaks.com, I share coupons that I display in a table. Now when Google picks up these coupons for a featured snippet, it displays them in an ugly manner because my table really shows up properly only on desktop sites. It’s not that my table doesn’t gracefully adapt to mobile – it does. It’s just that the kind of information I need to display doesn’t work well on a mobile device.

To solve this problem, I now display a different table with lesser content on mobile screens. It doesn’t make a difference to my conversion rates because I hardly receive any visitors from mobile users on that page. But my Google featured snippets are now more elegant on both mobile and desktop. As a result, I get higher click through rates because of a more attractive display.

For these and other reasons, you might consider showing mobile users a different version of your content. And with WordPress’s Gutenberg, this is now easy as pie.

Site Speed Benefits

Lastly, as you may know, Google considers site speed very important on mobile devices these days. So you could argue that there would be a case for stripping out any super high resolution images or videos from your mobile site if they are just nice-to-haves. For example, let’s say you run a portfolio site with a ton of examples of your artwork. Are all 20 of them absolutely necessary to show on a mobile device?

Step 1: Wrap Your Mobile and Desktop Content in Separate “div” Classes

If you’re using WordPress, inserting CSS into your posts is super easy as explained in this article on using the “Custom HTML” block.

For example, here is how you would wrap mobile content:

<div class="mobile-display">
My mobile content.
</div>

And this would be my desktop content:

<div class="desktop-display">
My desktop content.
</div>

Now we have to settle on a “breakpoint” in terms of width. Below this width, our mobile content will show and above that width, our desktop content will take over and hide the mobile one. Let’s say that width is 800px.

Step 2: Add the CSS Code Above Both of Them

Once you’re done creating your two blocks of code, simply add the following CSS to another Custom HTML block like this:

<style media="all">
.mobile-display{display:none}
.desktop-display{display:block}
@media (max-width:800px){
. desktop-display {display:none}
. mobile-display {display:block}
}
</style>

In the above sample code, replace “800px” with the width at which you want your mobile display to kick in. Save, test your changes, and you’re done!

Now mobile visitors to your site will get one version and desktop visitors another. All without resorting to messy things like having a separate mobile site or theme!

Don’t forget that crawlers like Google which render pages in a mobile viewport will see the mobile version and not the desktop one. Most of the time that won’t make a difference to you, but it’s worth keeping in mind for the impact on featured snippets as mentioned earlier.

Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!