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

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

Contents

Features

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

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!