I developed a set of queries for a particular element on a landing page.
Here is the HTML structure:
<div class="hsContent">
<article> This is my amazing content. Wow! </article>
</div>
This is how the initial styling looks for the above DIV:
.hsContent {
max-width: 600px;
position: absolute;
left: 25%;
right: 25%;
top: 10%;
z-index: 10;
}
Afterwards, I created several media queries to target smaller screen sizes, starting from 420px at that time.
@media only screen and (min-width: 320px){
.hsContent {
width: 300px;
position: absolute;
left: 10px;
top: 24%;
padding: 5px 30px 30px 30px;
}
}
When adding another media query for 320px width and checking with Dev Tools, it appears as if it's being overridden by the previous 420px width query.
Take a look at the dev tools screen capture here, which also shows an earlier query for 960px width being overridden.
@media only screen and (min-width: 320px)
.hsContent {
width: 300px;
top: 10%;
padding-left: 10px;
padding-right: 10px;
}
}
If you have any suggestions on what could be the issue and how to fix it, please let me know!