skip to Main Content

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


  1. Try using !important with each css property, there might be a possibility that you are overriding some already defined property

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search