remove div's on mobile and tablet

Question

https://staging-digemaya.kinsta.cloud/membership/

I have removed the div's using

    .page-id-16713 .cta-2-banner-2 {
            display: none
        }
        
        .page-id-16713 .quotes-wrapper {
            display: none
        }

however, they still display on tablet and mobile. I have searched everywhere and nothing is working.

Answer 1

I used the inspector tools on your site, and it looks like there's a media query being applied to those styles. Try moving

    .page-id-16713 .cta-2-banner-2 {
            display: none
        }
        
        .page-id-16713 .quotes-wrapper {
            display: none
        }

to the top of the stylesheet instead of the bottom and see if this fixes the issue.

For future reference, you should try to keep your @media queries at the bottom of your CSS. You can read more on this here

Answer 2

It appears that the css you shared is not in a media query when quickly looking through the html from your site, however the browser inspector tool shows that it's in a media query (2x):

@media screen and (min-width: 768px)
@media screen and (min-width: 768px)
      .page-id-16713 .cta-2-banner-2 {
           display: none;
      }

This means there might be invalid css somewhere before this property that is causing trouble. Browsers try to make sense of these things and that's why it's in a media query. I recommend a w3c validator or taking all your css into your code editor and combing through it.

The quickest fix (although not the recommended cause the real invalid issue should be resolved to prevent future trouble):

@media only screen and (max-width: 40em) {
    .page-id-16713 .cta-2-banner-2,
    .page-id-16713 .quotes-wrapper {
        display: none
    }
}