View original (French)

HTML: Show or hide content on mobile

Solved
Nathanielmlmb Posted messages 70 Status Member -  
Pitet Posted messages 2845 Status Member -
Hello,

I own a website hosted on Tumblr.
The Tumblr CMS allows me to add HTML-coded pages.
I would like to use this CSS code to optimize the display of my site on mobile;

//medium+ screen sizes
@media (min-width:992px) {
.desktop-only {
display:block !important;
}
}

//small screen sizes
@media (max-width: 991px) {
.mobile-only {
display:block !important;
}

.desktop-only {
display:none !important;
}
}

I have currently tried to put this code between these tags, tell me if they are correct;

<style type="text/css">
<!--
My CSS code
-->
</style>

I would like to know where I should write the content of my page in this code so that a text block, for example, only displays on mobile browsers, and another text block never displays on mobile browsers.

Thank you.

1 answer

Answer 1 / 1
Pitet Posted messages 2845 Status Member 530
 
Hello,

Your style tag is correct (the type attribute is optional).
Ideally, this tag should be placed in the <head> section of your HTML document, but it will also work if you place it in the <body> section.

In your content, you just need to apply the different classes to the tags you want to show or hide, for example: 
 <p class="desktop-only">Paragraph visible on desktop</p> <p class="mobile-only">Paragraph visible on mobile</p>


Have a great day
0
Nathanielmlmb Posted messages 70 Status Member
 
So if I copy my CSS between the <style> tags and add these lines class="desktop-only", nothing happens.
Both lines are displayed normally whether on mobile or on a browser.
0
Pitet Posted messages 2845 Status Member 530
 
Attention not to use CSS comments with // -> incorrect syntax. CSS comments are written like this: 
/* a CSS comment */


You might be missing a rule to hide the mobile-only class on a large screen.
Check this example and try resizing the Result frame to see the changes.
http://jsfiddle.net/jcdgssp3/
0