CODEWITHSUNDEEP
htmlcss
user3401088
user3401088

Reputation: 15

My media query won't work

I am working on a project and my first media query will not work it is set for media screen 768 px and it does nothing but when i resize my screen to 360px the media query does work

Here is my code

@media screen and (max-width: 768px){ 
.grid figcaption p {
    padding: 20px 7.0546% 20px 7.0546%;
    font-size: 0.250em;
    display: none;
}

.grid {
    padding: 65px 1.6666% 100px 10%;
    max-width: 60%;
}

.grid li {
    display: inline-block;
    width: 42%;
    padding: 20px 2.9629% 20px 2.9629%;
}

.cs-style-4 figcaption {
    height: 81.5%;
    width: 100%;
}


.grid figcaption {
    font-family: helvetica, arial, sans-serif;
    position: absolute;
    padding: 7.0546%;
    background: #FFFFFF;
    color: #ed4e6e;
}


}

Upvotes: 0

Views: 109

Answers (2)

Abhi
Abhi

Reputation: 350

@media (max-width: 768px) implies that the maximum resolution till which the following CSS would work is such. So, what i'm thinking is that there must be another media query which might be causing some sort of contradiction. Check for that or try writing .. @media (max-width: 768px) and (min-width:360px){ }

Upvotes: 2

Anand Natarajan
Anand Natarajan

Reputation: 1162

try following 

  @media screen and (max-width: 768px) and (min-width:100px){ .... }

Upvotes: 0

Related Questions