Connect with us

Hi, what are you looking for?

CSS

CSS Media Queries for tablets & mobiles

CSS Media Queries

CSS media queries are an excellent way to deliver different styles to different devices.

Here are CSS Media Queries for targeting your iPad in portrait or landscape mode. These media queries will target all iPad models.

Ipad Landscape & Portrait

/* Portrait and Landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
     .your-class-here {
         background:black;
    }
}

Ipad Landscape

/* Landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
     .your-class-here {
         background:black;
    }
}

Ipad Portrait

/* Portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
     .your-class-here {
         background:black;
    }
}

Here are CSS Media Queries for targeting your iPhone in portrait or landscape mode. These media queries will target iPhone 6+, 7+ and 8+.

iPhone 6+, 7+ and 8+ Landscape & Portrait

/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
     .your-class-here {
         background:black;
    }
}

iPhones 6+, 7+, 8+ Portrait

/* Portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
     .your-class-here {
         background:black;
    }
}

iPhones 6+, 7+, 8+ Landscape

/* Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
     .your-class-here {
         background:black;
    }
}

Here are CSS Media Queries for targeting your iPhone X in portrait or landscape mode. These media queries will target the iPhone X.

iPhone X Landscape & Portrait

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
     .your-class-here {
         background:black;
    }
}

iPhone X Portrait

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
     .your-class-here {
         background:black;
    }
}

iPhone X Landscape

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3)and (orientation: landscape) {
     .your-class-here {
         background:black;
    }
}
Click to comment

Leave a Reply

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

Advertisement

More On The Net BLog

Business

As per our previous announcement, the Website Helper blog has now become thenet.blog. Here we have it, 36 approved UK business directories you can...

Web Hosting

GoDaddy has become a household brand, they are one of the biggest website hosting and domain name companies in the world. However, being the biggest does...

WordPress

Did you know that uninstalling WordPress plugins from the dashboard is simply not enough? Many website owners have most likely installed and tested several WordPress plugins but...

Business

Are you looking for alternatives to Peopleperhour.com to outsource your next project? For those that don’t know what Peopleperhour.com is, it’s an online freelance micro job...

SEO

Traffic is bad on the road. But it is a blessing on a website or blog- as long as your bandwidth can handle it....

WordPress

The problem faced by many WordPress websites using contact forms is spamming. It is frustrating and time-consuming to deal with. Spamming happens when malicious...

CSS

CSS media queries are an excellent way to deliver different styles to different devices. The rapid growth of mobile devices has made it a...

Business

Whether you are a freelancer or a business with several employees, in this day and age,  you will need to have a website. A...

Advertisement