Show section only in specified media query-CodePudding

I'm working on making my website responsive, but I encountered a problem. I'm trying to hide a section to make it only phone visible, but as I try to set my display:none for my section and to enable it in my media query, it is overwritten by my non-media query code.

The 2 sections that I want to hide from PC users are .phone-services and .avis-phone. The problem is that, as I said if I state them as display:none, they will overwrite my media query.

Here is a part of my @media CSS:

@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {

    .services {
        display:none !important;
    }

    .avis {
        display:none !important;
    }

    .phone-services {
        background:#02000A;
    }

    .avis-phone {
       background:#02000A;
       color:white;
   }
}

Here is a part of the other CSS that overwrites it:

@import url('https://fonts.googleapis.com/css2?family=Shippori Antique B1&display=swap');

* {
    margin:0; padding:0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none; border:none;
    font-family: "Shippori Antique B1" , sans-serif;
    transition: .2s linear;

}

html{scroll-behavior:smooth !important}

a:visited{
    visibility:hidden;
}

.phone-services {
    display:none; /*Overwrites my media query*/
}

.avis-phone {
    display:none; /*Overwrites my media query*/
}

HTML:

<section >
   Section need to be shown only for mobile
</section>
<section > 
    Section need to be shown only for mobile
</section>

Thanks for your help!

CodePudding user response：

@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait)

min-device-width and max-device-width are only for actual devices. If you try to simulate that on a desktop, it won't work for you. You should use min-width and max-width instead.

Secondly, -webkit-min-device-pixel-ratio: 2 is to check device resolution, but we have various devices which we cannot simply cover with a particular resolution. I'd suggest removing it.

Another problem is from here

.phone-services {
    background:#02000A;
}

.avis-phone {
   background:#02000A;
   color:white;
}

You set display: none, but you don't set display: block (or any other visible display values)

Another point I'd like to note down that the style priority is TOP to BOTTOM when they have the same selectors. Your display style in media-query is above display: none like below, that will cause display problem too

@media {
  .phone-services {
     display: block; /*NOT WORKING*/
  }
}
.phone-services {
    display:none;
}

Full possible change can be

@import url('https://fonts.googleapis.com/css2?family=Shippori Antique B1&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  outline: none;
  border: none;
  font-family: "Shippori Antique B1", sans-serif;
  transition: 0.2s linear;

}

html {
  scroll-behavior: smooth !important;
}

a:visited {
  visibility: hidden;
}

.phone-services {
  display: none;
}

.avis-phone {
  display: none;
}

@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) {

  .services {
display: none !important;
  }

  .avis {
display: none !important;
  }

  .phone-services {
background: #02000A;
display: block;
  }

  .avis-phone {
background: #02000A;
color: white;
display: block;
  }
}

<section >
  Code in here
</section>
<section >
  Code in here
</section>

CodePudding user response：

You always have to define display if you are hiding / showing them depending on @media, both in @media part and non-@media part.

Try adding it to the rules:

@media screen and ...

{

 .phone-services {
    background:#02000A;
    display: block; // can be block, inline-block, flex...
 }

 .avis-phone {
    background:#02000A;
    color:white;
    display: block; // can be block, inline-block, flex...
 }
}

Note that if you have @media part loaded before the normal one, you have to make sure to load @media part after, so it does not get overridden, or you can use !important with the rule (not recommended).