Responsive Design – display different contents for the different devices with CSS

Last modified on by Karthikeyan K

Today I am going to tell how to display different contents for the different devices using simple CSS code. I have used css @media rule to set different style rules for different media

Features

  • Use any Content you want inside the sections
  • Use whole Content Parts & Images for different devices
  • show – desktop, tablet, mobile-landscape, mobile-portrait
Desktop Mode

Desktop Mode

Mobile Landscape Mode

Mobile Landscape Mode

Mobile Portrait Mode

Mobile Portrait Mode

Tablet Mode

Tablet Mode

CSS Code for Responsive Visibility

.mobile { display: none !important; }
.mobile-portrait { display: none !important; }
.mobile-landscape { display: none !important; }
.tablet { display: none !important; }

@media (max-width: 479px) {
.mobile { display: inherit !important; }
.mobile-portrait { display: inherit !important; }
.mobile-landscape { display: none !important; }
.desktop { display: none !important; }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
.mobile { display: inherit !important; }
.mobile-portrait { display: none !important; }
.mobile-landscape { display: inherit !important; }
.desktop { display: none !important; }

}

@media (min-width: 768px) and (max-width: 959px) {
.tablet { display: inherit !important; }
.mobile-portrait { display: none !important; }
.mobile-landscape { display: none !important; }
.desktop { display: none !important; }
}

HTML Code

<div class="desktop">
This Message will only show up in &#8211; Desktop mode.
</div>
<div class="tablet">
This Message will only show up in &#8211; Tablet mode.
</div>
<div class="mobile-landscape">
This Message will only show up in &#8211; Mobile Landscape mode.
</div>
<div class="mobile-portrait">
This Message will only show up in &#8211; Mobile Portrait mode.
</div>

View Demo

Please don’t forget to share and subscribe to latest updates of the blog.

Thanks!

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *