SAY HI? (415) 895-9008   |          
SCHEDULE A MEETING  | PORTFOLIO  |  M-F 9AM-5PM
Affordable web solutions for all your creative needs.

CSS Media Queries for Every Device

notebookmockup08

When building responsive websites, the below CSS can be added to your custom style sheet giving you flexibility on pretty much any type of device, it even handles landscape or portrait or both. This is an essential to understand and you can almost do anything you want with the below Media Queries when it comes to responsive design.

/* Smartphones (portrait and landscape) -- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) -- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) -- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) -- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) -- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) -- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops -- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens -- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

Check out more from CSS-Tricks and if you are interested in having me build a fully mobile responsive website right here in Sonoma feel free to get in touch with me.

Tags: , , , ,

BrynHowlett.com

Thank you for visiting. Here you will find a playground of information for business owners and web designers, developers and internet marketers. My goal is to create simple, yet beautiful designs as well as develop intuitive and easy-to-use interfaces to make you stand out from your competition. Get in touch with me today if you are interested in my services. Contact Me or hello@brynhowlett.com

Leave a comment

  • Web Design and Marketing in San Rafael
  • Video Marketing in Marin
  • Video Production and Editing in Marin
  • Wordpress Design in Marin
  • Custom Wordpress Website Development
  • Best web design company in Sonoma
  • Great Website Design Firm Marin
  • Grow your business with a New Website
  • Small Business Web Design
  • Website designer for Hire in Marin
  • Hire a Videographer in Marin
  • Mill Valley Web Design
  • Web Design in Larkspur
  • Fairfax and San Anselmo Web Design
  • Squarespace Web Design in MArin
  • eCommerce Shopify web designer
  • Shopify Web Developer in San Rafael
  • Wordpress Responsive Website Designer

Main Info


Happy Yelpers


Contact Me

Recommended Hosting