display different content depend on the screens size

Hi there,

Here's an example:

Say, you want test-1 class to display on desktop and tablets but not on mobile, you can do something like this:

/* For tablets and desktops */
@media(min-width:769px){
.test-1{
display: block; 
}
}
/* For mobile */
@media(max-width:768px){
.test-1{
display: none; 
}
}

Alternative to display: none;, if you want the element to be invisible but keep occupying the space, you can try visibility:hidden; or opacity: 0;.

Thanks what about tables screens

*Tablets screen

We can make another rule for tablet screens.

Example:

/* For desktops */
@media(min-width:1025px){
.test-1{
display: block; 
}
}
/* For tablets and small desktops */
@media(min-width:769px) and (max-width:1024px) {
.test-1{
display: block; 
}
}
/* For mobile */
@media(max-width:768px){
.test-1{
display: none; 
}
}

ok
thank you very much

No problem. :)