Hello everyone, I need some help with media queries.
I've been working on a website that is already responsive. However, I am required to write the code in a child theme rather than directly in the original files. When I attempt to add new media queries, they do not seem to take effect.
This seems to be an issue related to the default media queries of the site:
@media only screen and (max-width: 3000px)
#logo {
text-align: center;
padding-right: 120px !important;
float: none !important;
}
My goal is to target the logo element and make changes for both landscape and portrait modes, like this:
@media screen only (max-width:480px){
#logo{
margin-left:-23%!important;
}
}
@media screen only (max-width:320px){
#logo{
margin-left:-39%!important;
}
}
While using min-width instead of max-width does work, it ends up affecting other parts of the design.
My understanding is that by setting a max-width of 320px, the code will apply when the screen resolution is under 320px, otherwise it will use the code for 480px. Am I correct in thinking this way?