CODEWITHSUNDEEP
cssmedia-queries
ZHMEN
ZHMEN

Reputation: 63

CSS @media query not working correctly

There is a need to scale media requests with one image (logo) for each mobile device: iPhone 5, 6, 6+, iPad's, as well as on large screens. Accordingly, I almost need to specify a style in the form of width, etc. For portrait and landscape orientation. Of all works only for the iPhone 6, iPad's and large screens (=> 1600px) For small screens (320x480) and iPhone 6+ does not work (check in Chrome)

For iPhone 6+ media query applied as for iPhone 5...

Tell me please, what's wrong in my code? I will be extremely grateful!

Here's the CSS:

@media only screen and (max-width: 320px) and (max-width : 480px) {
.logo-mobile img {
    width: 150px;
    transform: translateY(-7px); 
}
}

@media only screen and (min-width: 321px) and (max-width : 480px) {
.logo-mobile img {
    width: 150px;
    transform: translateY(-7px); 
}
}

@media only screen and (min-width: 320px) and (max-height: 568px) and 
(orientation: landscape) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
    width: 144px;
    transform: translateY(-7px);
}
}

@media only screen and (min-width: 320px) and (max-height: 568px) and 
(orientation: portrait) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
    width: 144px;
    transform: translateY(-7px);
}
}

@media only screen and (min-width: 375px) and (max-height: 667px) and 
(orientation: landscape) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
    width: 144px;
    transform: translateY(-8px);
}
}

@media only screen and (min-width: 375px) and (max-height: 667px) and 
(orientation: portrait) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
    width: 100%;
    transform: translateY(-11px);
}
}

@media only screen and (min-width: 414px) and (max-height: 736px) and 
(orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
.logo-mobile img {
    width: 144px;
    transform: translateY(-8px);
}
}

@media only screen and (min-width: 414px) and (max-height: 736px) and 
(orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
.logo-mobile img {
    width: 144px;
    transform: translateY(-8px);
}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and 
(orientation: landscape) and (-webkit-device-pixel-ratio: 2) { 
.logo-mobile img {
    width: 100%;
    transform: translateY(-8px);
}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and 
(orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
.logo-mobile img {
     width: 100%;
    transform: translateY(5px);
}

@media only screen and (min-width: 1600px) {
.logo-mobile img {`enter code here`
    width: 100%;
}
}

Upvotes: 1

Views: 438

Answers (1)

Eric McWinNEr
Eric McWinNEr

Reputation: 533

Well you could start by ensuring you added the meta tag

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

You could also consider adding appropriate prefixes to your CSS3 selectors like so...

-webkit-transform: translateY(8px)//Chrome
-o-transform: translateY(8px) //Opera

and so on. You could check w3schools for a complete list of css3 prefixes. I hope this helps...

Upvotes: 1

Related Questions