CODEWITHSUNDEEP
cssmedia-queries
Frans B
Frans B

Reputation: 65

Media Queries not working for smaller screen sizes

/***** BIGGER SCREEN *****/

@media screen and (min-width: 1367px) {

#body-wrapper {
max-width: 1367px;
margin: auto;

}

}

/** IPHONE **/

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) { 

#logo {
    display: none;
}

.wrapper {
    height: 200px;
}
}

Trying to get a simple media iphone query to work, I have tried everything but it makes no changes on my browser/phone, I have meta viewport and file is working fine. I have made query changes in other sizes which work, for some reason once I go below 700px nothing changes no matter what I do..

Upvotes: 0

Views: 2389

Answers (2)

DamianoPantani
DamianoPantani

Reputation: 1376

Use max-width only

.regular-classes {
    ...
}

/* narrower than 1367px - overrides all attributes from the regular selectors */
@media screen and (max-width: 1367px) {
    ...
}

/* narrower than 667px - overridse all attributes from the queries above */
@media only screen
and (max-device-width : 667px) { 
    ...
}

/* narrower than 375px - overrides all attributes from the queries above*/
@media (max-device-width : 375px) {
    ...
}

Upvotes: 1

Sumit patel
Sumit patel

Reputation: 3903

Update css

    @media only screen 
and (min-width : 375px) 
and (max-width : 667px) { 

#logo {
    display: none;
}

.wrapper {
    height: 200px;
    border:1px solid black;
}
}

Live Demo Here

Try to resize window and change effect in Fiddle

Upvotes: 0

Related Questions