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!

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2013/01/Mobile-Landscape-Mode.pnghttp://w3lessons.info/wp-content/uploads/2013/01/Mobile-Landscape-Mode-150x150.pngKarthikeyan KCSS3Web DesignCascading Style Sheets,responsive,Website
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 FeaturesUse any Content you want inside the sections Use whole Content Parts & Images for different devices show – desktop, tablet, mobile-landscape, mobile-portraitCSS...