I am currently troubleshooting an issue with my media query in a project. The media query is set for a screen width of 768px, but it appears to not be working as expected. Interestingly enough, when I resize my screen to 360px, the media query does work.
Below is the code snippet:
@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;
}
}