Video Tutorial to Show Different Content on Mobile
Subscribe to my channel:
Different content depending on the device
What we are going to do is how to Show Different Content on Mobile and Desktop on a Web WITHOUT PLUGINS.
This can be very useful, for example, if we want to notify users to change devices to have a good experience or for any other reason.
We have to bear in mind that on many occasions having a good responsive design is not only about changing the size of the elements, but also that the elements appear. most relevant elements according to the device.
Showing different content on mobile is part of making a good responsive design.
We could have done it with a plugin, in fact I'll do it in another tutorial, but I wanted to show how to do it without installing anything.
Remember the saying:
«The best plugin is the one you don't install»
Oscar Martin
Creating the css classes
We need to create several CSS classes so that the design we want is activated.
I'm going to do it in two different ways:
Create CSS Classes manually
To create a css class manually in WordPress we have to click on the 3 dots of the gutenberg block and select the option Edit as HTML
By doing so, the block will appear in html and we can add the class as follows:
<p class="contenido-escritorio">Contenido para escritorio</p>
Create CSS Classes with WordPress Options
To do it with the options that WordPress brings, we select the block and in the advanced options on the right we add the name of the class:
Creating the CSS in customize additional css
To display different content depending on the size of the device, we have a very useful resource in css and this is the Media query
Media queries allow us to set different rules depending on the screen size.
The media queries detect the size of the screen and depending on the size, some css rules or others are activated.
Here I leave the css used
.contenido-escritorio{
display:block;
}
.contenido-movil{
display:none;
}
@media screen and (max-width: 768px){
.contenido-escritorio{
display:none;
}
.contenido-movil{
display:block;
}
}
If you want to know more about the display rule here you can do it
Frequently Asked Questions about adding content depending on the size of the screen
Does it work on pages that are not made in WordPress?
Of course, since we use CSS you can use this method in any cms or manually made pages.
Do you securely protect content?
No, as we are changing the display to CSS it is not a safe way to protect sensitive content. The content is not visible but if you look at the code it is. So don't use it to create Membership Sites
Is it better to use a plugin or do it manually?
Whenever we can, it is better to do it manually so as not to overload the page with unnecessary plugins.
Are classes reusable?
Yes, once you have created it you can use them in all the content of the web without having to create new rules in the CSS to Show Different Content on Mobile.
If you like these types of CSS tricks, here's another one for you. change the text by css