Change is good.
Change can make things better.
Today I’m going to show you how to do a very simple magic trick with 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:
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:
DO NOT COPY THAT HTML CODE YET YOUNG GRASSHOPPER!
So with that code in place this is what the site looks like on desktops
and on my iPhone (you suck Android!)
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:
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:
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:
- On Desktops: hide the MOBILE content
- 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 make that happen.
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?
The answer is: BOTH.
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:
So copy the CSS code below and paste it into that spot:
Now the magic is starting to happen.
Take a look at what the site now looks like on my desktop:
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.
It’s also gone on my phone:
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 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:
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:
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:
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):
and on mobile devices it now look like this (the blue mobile content image):
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.
Imagine The Possibilities
Like I mentioned above, you can show or hide anything. 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!
Ian “The-Wrestling-Mask-Wearing-Guy” Anderson
PS: Big shout out to Beth (our neighbor from across the bay) for this CSS tutorial idea!