2

I am trying to get my website to have a separate top banner when in desktop mode to mobile mode with responsive @media tags

So, I have been struggling to understand what I am doing wrong? I am trying to make it so that in desktop mode it will use the desktop top header banner which it does but then when it gets to about 850px width it will then switch to the mobile top header which are icons instead of text along the header.

No matter what I try it doesn't seem to work and both headers are present no matter what width the website is at.
I have tried using code such as this;

@media (max-width:850px){
.mobile_menu{
    display:none !important; 
    }
}

@media (max-width:2000px min-width:850px){
.top-menu-container{
    display:none !important;
    }
}

Please if anyone can help much appreciated and I apologize in advance if I am just being stupid and not realizing something as I am fairly new to the whole @media coding in CSS.

Martin
  • 22,212
  • 11
  • 70
  • 132
Kieran
  • 17
  • 5

1 Answers1

1

This is what you are looking for:

@media only screen and (max-width:850px) {
    /* STYLES HERE */
}

@media only screen and (min-width:851px) and (max-width:2000px) { 
    /* STYLES HERE */
}

you need to use and.

Martin
  • 22,212
  • 11
  • 70
  • 132
Milad Abooali
  • 686
  • 1
  • 13
  • 30
  • Ahhh thank you, I'll give it a try now and report back :) – Kieran Feb 17 '20 at 15:44
  • Okay, I have just amended by code to your suggestion and it hasn't changed anything. I feel as if it might be me doing something wrong somewhere else but I am not sure. Thank you for the help anyway! – Kieran Feb 17 '20 at 15:50
  • What exactly does the `only` do? Is it necessary? – Captain Jack Sparrow Feb 17 '20 at 16:24
  • 1
    The only keyword prevents older browsers that do not support media queries with media features from applying the specified styles. It has no effect on modern browsers. – beltouche Feb 17 '20 at 17:05
  • see https://stackoverflow.com/questions/56198043/what-does-the-only-screen-code-mean-in-a-css-media-query – beltouche Feb 17 '20 at 17:24