Show and Hide Different Content On Mobile Devices & Desktops

Show and hide different contentYou don’t always order the exact same pizza, so why display the exact same content on mobile devices AND on desktops? Here’s how to show and hide different content on mobile devices and desktops.

The first thing you need to understand is that there are MANY ways to show and hide content on mobile devices and desktops. That’s why you’ll find three different ways below to show and hide content depending on how your website has been created.

Pick the one below that best matches your website, clicking one of these will bookmark you down this page… or you can manually scroll down forever if that’s your thing.

Method 1: The Universal Method (Works On Any Platform)

Learn how to use a few snippets of CSS to show and hide content on any website regardless of how the website was built.

Method 2: The Beaver Builder Method

See how to use the built in Responsive Layout settings on any Beaver Builder module to show and hide content.

Method 3: The Dynamik Website Builder Method

Using a combination of CSS and a few Dynamik Website Builder settings you can easily show and hide content.


Method 1: Show and hide different content on any platform

Just by using some simple CSS can easily show and hide different content on mobile devices and on desktops regardless of how your website was created.

Yes, this method will also work on ANY Beaver Builder or Dynamik Website Builder site… but follow those methods which use some of the built in features of those platforms.

So…. you created a website using some random WordPress theme or Joomla or Drupal etc… and you want to show and hide different content on mobile and desktop devices!  No problem!  To do that we just need to use some magic CSS!

PRO TIP: You should really consider using a combination of WordPress and Beaver Builder!

Step 1 – The Demo Content

In Text or Code mode, copy and paste the below code into your web page / widget / post and then Save your changes:

<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>

Just by looking at that you should be able to tell that the top block will be for the DESKTOP content and the bottom block will be for MOBILE content. In the example above I’m just using a one simple sentence but you can put ANYTHING in between the two opening and closing div tags (like photos, headings, youtube videos, galleries, etc…).

Your screen (if you are using WordPress) should now look something like this:

Show and Hide Different Content On Mobile Devices & Desktops

SUPER-DUPER IMPORTANT: Make sure you are pasting that line in Text or Code mode OR ELSE THIS WILL NOT WORK!!!

Step 2 – The Magic CSS

Now that the two pieces of content are on your site now we need a bit of CSS magic to make the Desktop content only appear on desktops and the Mobile content only appear on mobile devices. Edit your website CSS file and paste the following CSS in that file. and then SAVE your changes.

  • For all WordPress users this is going to be located in your themes’s admin panel or in Appearance > Editor > style.css file
  • For all other platforms looks for any type of section that deals with “Custom Style Sheets” or “Advanced CSS” or “Custom Styles”…each platform is different

#content-desktop {display: block;}
#content-mobile {display: none;}

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

#content-desktop {display: none;}
#content-mobile {display: block;}

}

IMPORTANT: Don’t forget that last little } at the end!

Step 3 – Check It Out

Look at your web page on a desktop and then on your phone. Notice how the content changes?

You can also resize the web browser on your Desktop so it’s skinnier to see the same effect. Check it out and see how to show and hide different content:

Show and Hide Different Content On Mobile Devices & Desktops

You can see above example live by going HERE.

Step 4 – Replace Demo Content

Now that you see it working now you can replace the demo Desktop and Mobile content with your own real content.  Remember you can add anything you want… it does not just have to be text.

HOW IT WORKS

If you are a little curious as to how this works, here’s a brief explanation:

Take a look at that CSS code you pasted into your theme CSS file.  You’ll notice that both blocks uses a standard browser based CSS rule for Display is used to make the magic happen.  There are many options for the Display command (see them here) but we are primarily using the Block and None option.

The top block is for all screen sizes larger than 768 pixels wide (aka Desktop devices)

The bottom block is for all screen sizes smaller than 768 pixels wide (aka Mobile devices)

Desktop: You’ll see that the desktop content has a Display value of Block on regular screens but on screens less then 768 pixels wide (which is standard for phones and some tablets) the Display value changes to None (which removes it).

Mobile: You’ll see that the mobile content has a Display value of None on regular screens but on screens less then 768 pixels wide (which is standard for phones and some tablets) the Display value changes to Block (which removes it).


Method 2: Show and hide different content in Beaver Builder

Show and hide different contentSo let’s get this out of the way right here… Beaver Builder is amazing and your life is going to be so much easier than the other two methods described in this post to show and hide different content!

Below is the easiest way to show and hide different content on mobile devices all thanks to the built in features of Beaver Builder. Click that link if you do not already have the best WordPress Framework.

Once Beaver Builder is installed and you are editing a Page, just follow these steps:

Step 1 – Add your Desktop content

Let’s start by adding the content for DESKTOP devices, to do this make sure you are in Page Builder mode (where you can drag and drop modules into the page) and drag in ANY Beaver Builder module into your page, I’m just going to use a simple Text module:

Show and Hide Different Content On Mobile Devices & Desktops

Add your DESKTOP content into that module.  In this example I’m just going to use some latin filler text but this method will work with any content.

Step 2 – Set the Display settings

Click on the Advanced tab at the top of popup window and in the Display section choose Large & Medium Devices Only… then Save your changes.

Show and Hide Different Content On Mobile Devices & Desktops

Step 3 – Add your Mobile content

Now let’s add the content you want to display on MOBILE devices.  Drag in ANY module (for this tutorial I’ll just use a Text module but you could do the same for any button, post module, heading, etc…) DIRECTLY UNDER THE PREVIOUS “DESKTOP” MODULE then add the content you want to display on MOBILE devices. In this example I’m just going to tweak the text a little and make one word blue.  Like this:

Show and Hide Different Content On Mobile Devices & Desktops

Step 4 – Set the Display settings

Click on the Advanced tab at the top of module and in the Display section choose Small Devices Only… then Save your module changes. It should look like this:

Show and Hide Different Content On Mobile Devices & Desktops

At this point (when you are still in Page Builder mode) you should still see BOTH modules on your screen (like the screenshot below)… this is OK!  It’s when you save your changes where the magic will start to happen.

Show and Hide Different Content On Mobile Devices & Desktops

Step 5 – Save, Publish and View

Click the Done button (top right corner of your screen) and then the Publish button to save your changes. Then view your page on your Desktop and then on your phone… notice how the content changes? You can also just resize your browser down to a mobile device size like this:

Show and Hide Different Content On Mobile Devices & Desktops

Is it done? YUP!

Is it awesome?  YUP!

 


Method 3: Show and hide different content in Dynamik Website Builder

So… you’re using Dynamik Website Builder & Genesis? Right? You want to show and hide different content on desktop and mobile devices? Cool! Cool! Keep reading…

Below I’ll teach you a very simple magic trick using CSS that will show some content on desktop devices and the in that very same spot show completely different content on mobile devices.  We’ll also talk about videos games, tacos and my sweet Mexican wrestling mask.  Sound good?  Sound a bit crazy?  It sure fucking does!

Ready to get started?  Good!  The first thing you need to do is to…

Step 1 – Add All Your Content

Without a foundation you cannot build a house.  Without an XBOX you cannot play video games (you suck PS4!).  Without a Taco Bus you cannot indulge in the savory goodness of Taco Tuesday and without your content in place you cannot show/hide that content.

So we’re going to make it super simple and very obvious… let’s show/hide these two images:

Show and Hide Different Content On Mobile Devices & Desktops

Show and Hide Different Content On Mobile Devices & Desktops

See what I mean.  It’s going to be very obvious as to what should go where, right?

I should mention at this point that what you are about to learn can be applied to text, videos, hyperlinks, etc… there is no limit to what you can show/hide.

Once again to make things simple I’m going to do this all in the Header Right area of the Web Designers Academy site, but this can be done anywhere (sidebar, content, footer, etc…).

To do that, I added a text widget to the header right and put simple <img> tags that reference those images:

Show and Hide Different Content On Mobile Devices & Desktops

DO NOT COPY THAT HTML CODE YET YOUNG GRASSHOPPER!

So with that code in place this is what the site looks like on desktops

Show and Hide Different Content On Mobile Devices & Desktops

and on my iPhone (you suck Android!)

Show and Hide Different Content On Mobile Devices & Desktops

Sidenote: I hate shaving so please excuse the excess facial hair.

As you can tell it looks stupid.  However, we’re got the content that we want to show and hide in place… the next step is to…

Step 2 – Wrap It In DIV Tags

With our content in place we need to mark which content should be shown and hidden… we’re gonna do that by wrapping each piece in it’s own DIV tag.

Let’s make things simple, let’s use the div tag content-mobile for mobile content and the div tag content-desktop to indicate the desktop content.

Genius naming, I know!

Heading back to my header right widget and wrapping the two pieces of content (in this case images) in those tags now looks like this:

Show and Hide Different Content On Mobile Devices & Desktops

Now I want you to get involved here! See the best way to learn something is to do it, that’s why I play video games… incase I ever need to shoot a missile launcher while parachuting off a building, I’ve now got that skill handled.

Find a spot on your site where you want to practice this. Pick a widget area, or a page or wherever you want to nerd-out. Once you got it copy and paste this into that area:

<center>
<div id=”content-desktop”>
<img src=”https://www.webdesignersacademy.com/wp-content/uploads/content-desktop.png”/>
</div>

<div id=”content-mobile”>
<img src=”https://www.webdesignersacademy.com/wp-content/uploads/content-mobile.png”/>
</div>
</center>

Did you do that?  Good!

Just wrapping those DIV tags around should not change anything… it should look just like it did in the screenshot above.  See you can wrap a DIV tag around anything but unless there is a class and some style applied to that DIV tag it will not do anything.

So now that the two pieces of content are clearly defined by different DIV tags now we need to…

Step 3 – Add CSS To Show OR Hide Div Classes

Here is the somewhat confusing part (the part Amy gets stuck on all the time).  We now need to tell the site (using CSS) to do the following:

  1. On Desktops: hide the MOBILE content
  2. On Mobile Devices: Hide the DESKTOP content and show the MOBILE content

While that might seem a bit intimidating it’s actually pretty easy to do.  Just a few lines of CSS in a few places will show and hide different content.

Assuming you are using Genesis + Dynamik Website Builder (and you should be) let’s start by going to Genesis > Dynamik Custom > CSS.

Show and Hide Different Content On Mobile Devices & Desktops

There you’ll find a bog ol’ box for you to type in custom CSS… but here’s a questions: what does the CSS that you enter into that box control?  The Desktop site or the Mobile site?

HHHmmmm.

The answer is: BOTH.

What?

Mind = blown!?!

It’s true, the CSS in that big box affects the website (wherever it happens to be viewed) so we need to specify what to do with EACH DIV class in this box THEN we’ll do the same but just for mobile devices.

If you remember (from like 30 seconds ago) we want to hide MOBILE content and display DESKTOP content on desktop devices.  To do that we need to enter this CSS:

Show and Hide Different Content On Mobile Devices & Desktops

So copy the CSS code below and paste it into that spot:

#content-desktop {
display: inline;
}

#content-mobile {
display: none;
}

Now the magic is starting to happen.

Take a look at what the site now looks like on my desktop:

Show and Hide Different Content On Mobile Devices & Desktops

See how the mobile image is now gone?  It’s gone because the CSS tells it to display: none… which in slang terms means: get the fuck outta here.  So the mobile content image is gone.

Bbbuuuuuuutttttt….

It’s also gone on my phone:

Show and Hide Different Content On Mobile Devices & Desktops

Sidenote: That’s my impression of this emoji 🙁

Why?

Because the Custom CSS box affects the website everywhere it is display… so it’s also hiding it on my phone.

So let’s fix that to show and hide different content where we want it!

To fix it we need to go to Genesis > Dynamik Design > Responsive and go to the icon all the way to the right.  So…. the one that has a dotted rectangle around it:

Show and Hide Different Content On Mobile Devices & Desktops:

Each icon controls a certain screen size and screen sizes typically relate to the device it is being viewed upon.  That’s why we are gonna add some CSS to the once all the way on the right, because that one controls the smallest screens (ie: mobile devices).

What CSS should we add?  Well, what we need to do now is to reverse the standard CSS that we added above so instead of HIDING mobile content, we want to show it and instead of making the DESKTOP content display we want to hide that.

So we want to add this:

#content-desktop {
display: none;
}

#content-mobile {
display: inline;
}

See how the display value has changed?

Go paste it into that box and save your changes, so your screen should now look like this:

Show and Hide Different Content On Mobile Devices & Desktops

With that done the last thing to do is to check it out on a desktop and a mobile device… so on desktops it looks like this (the red desktop content image):

Show and Hide Different Content On Mobile Devices & Desktops

and on mobile devices it now look like this (the blue mobile content image):

Show and Hide Different Content On Mobile Devices & Desktops

BONUS: Remember that mask I picked up in Cozumel, Mexico… well I thought it was an appropriate time to wear it for you!  You’re welcome Internet people.

Show and hide different content – just imagine the possibilities

Like I mentioned above, you can show and hide different content in various ways.  You can have a YouTube video displaying on desktops and a welcome message displaying on mobile devices.  You can have a link to download a PDF on desktop and then a link to see a Google map on mobile devices.  Get it?  Good!

Now you know and now you can show/hide anything you want!

Your friend.
Ian “The-Wrestling-Mask-Wearing-Guy” Anderson

PS: Big shout out to Beth (our neighbor from across the bay) for this CSS tutorial idea about how to show and hide different content!

This article was updated on May 22, 2018

More Posts You Might Like

Get notified when we publish new posts and download a free gift right now!

7 Comments

  1. Grant on May 19, 2018 at 3:54 pm

    Thank you for the detailed explanation. I am not able to find genesis or dynamik in bold grid. I am using wordpress instead of wda. Is this feature not available in wordpress. Thanks in advance!

  2. Rodrigo on May 25, 2018 at 12:16 pm

    Hi,

    If we hide certain things on desktop as mentioned, hence only loading on mobile version. When the desktop version is loaded, does the hidden mobile css/content loads too?

    Thank you!

    • Web Designer's Academy on June 10, 2018 at 12:41 pm

      Hi Rodrigo… yes it loads in the browser but it does not display to the visitor.

  3. Hassan Raza on June 26, 2018 at 4:48 am

    Hi!

    I have tried the universal method on blogger but I got these results:
    Mobile content was hidden from the desktop as i wanted
    But on mobile, desktop content was also shown with mobile content please help me

    Thanks

  4. Clieelew on August 13, 2018 at 6:06 pm

    So you! like something extremely new? Take a look at this site. Only there the choice of girls for every unique guy and completely free! They are responsible slaves, they will and want do everything you command !
    http://gov.shortcm.li/kings1#L32

  5. Clieelew on October 1, 2018 at 5:22 pm

    As you need something startup new? Look at this website. Only there the choice of women for every will and completely free! They are wettest slaves, they will and want do anything you say !
    https://rebrand.ly/governy#C9

Leave a Comment