I have created two media queries in an attempt for a responsive page but the bottom media query is not working.
@media screen and (min-width: 1920px) and (max-width: 1920px) {
.header-my-account-btn {
position: absolute;
top:-64px;
right: -240px;
}
.header-cart-withlist-links-container-inner {
position: absolute;
top:-5px;
right: -35px;
}
.tf-f-cart-icon {
visibility: hidden
}
}
;
@media screen and (min-width: 350px) {
.header-my-account-btn {
position: absolute;
top: 44px;
right: 240px;
}
.header-cart-withlist-links-container-inner {
position: absolute;
top:-5px;
right: -35px;
}
}
;
I am using wordpress css editor to edit the css
2
Answers
Try using !important with each css property, there might be a possibility that you are overriding some already defined property
Just a guess since the theme you happen to be using will affect things greatly. It can be overriding your styles.
One observation.
I’m surprised you see anything for this. It says to only work when the browser is exactly 1920px. Shouldn’t do anything for any other dimension.
@media screen and (min-width: 1920px) and (max-width: 1920px)
Second.
Semicolons after media queries aren’t needed or proper. The one after the first media query might be causing the 2nd to break. Especially if your theme has any type of css optimizer installed.
Try removing the semicolons after the media queries.