display:none won't work on my <div>, why?-CodePudding

I am trying to make a part of my website mobile compatible and thus want to switch from a button selection menu to a dropdown menu on smaller screens.

My code looks as following at the moment:

<html>
<head>
<style>
.reiter {
        background-color: rgba(250,250,250,1);
        position: fixed;
        top: 98px;
        height: 64px;
        width: 100%;
        z-index: 9;
        padding-top: 2px;
    }
.switchbtn {
        border: 1px solid #282E34;
        background-color: rgba(250,250,250,1.00);
        color: #282E34;
        padding: 7px 14px;
        font-size: 16px;
        cursor: pointer;
        border-radius: 5px;
        border-color: #282E34;
        transition: all 0.3s;
        width: 12%;
        height: 60px;
    }

  @media screen and (min-width: 1000px) {.dropswitch {display: none;} }
  @media screen and (max-width: 1000px) {.reiter {display: none;} }

</style>
</head>
<body>

 <div ><center>
        <a href="#jumpup"><button id="schaltschrankbutton"  type="button" 
 onClick="openschaltschrank()">Steuerungs-<br>systeme</button></a>

        <a href="#jumpup"><button id="ledbandbutton"  type="button" 
 onClick="openledband()">Leucht-<br>lösungen</button></a>

        <a href="#jumpup"><button id="dimmerbutton"  type="button" 
 onClick="opendimmer()">Geräte &<br>Dimmer</button></a>

 </center></div>
    
    <select >
        <option value="1">Steuerungssysteme</option>
        <option value="2">Leuchtlösungen</option>
        <option value="3">Geräte & Dimmer</option>
    </select>
</body>
</html>

The dropdown menu does exactly what it should, it appears, when the screen is small and disappears, when the screen is big. The div does not care the least though. I tried adding @media screen and (min-width: 1000px) {.reiter {display: block;} }, that did not change anything though.

CodePudding user response：

You where missing an meta tag and some styling to keep the buttons 1 size. When they fall of the screen it should then switch to your dropswitch.

<html>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <head>
        <style>
            .reiter {
                background-color: rgba(250, 250, 250, 1);
                position: fixed;
                height: 100px;
                width: 100%;
                z-index: 9;
                padding-top: 2px;
            }

            .switchbtn {
                border: 1px solid #282E34;
                background-color: rgba(250, 250, 250, 1.00);
                color: #282E34;
                padding: 7px 14px;
                font-size: 16px;
                cursor: pointer;
                border-radius: 5px;
                border-color: #282E34;
                transition: all 0.3s;
                width: 300px;
                height: 60px;
            }

            @media screen and (min-width: 1000px) {
                .dropswitch {
                    display: none;
                }
            }

            @media screen and (max-width: 1000px) {
                .reiter {
                    display: none;
                }
            }
        </style>
    </head>
    <body>
        <div >
            <a href="#jumpup"><button id="schaltschrankbutton"  type="button"
                    onClick="openschaltschrank()">Steuerungs-<br>systeme</button></a>

            <a href="#jumpup"><button id="ledbandbutton"  type="button"
                    onClick="openledband()">Leucht-<br>lösungen</button></a>

            <a href="#jumpup"><button id="dimmerbutton"  type="button" onClick="opendimmer()">Geräte
                    &<br>Dimmer</button></a>
        </div>
        <select >
            <option value="1">Steuerungssysteme</option>
            <option value="2">Leuchtlösungen</option>
            <option value="3">Geräte & Dimmer</option>
        </select>
    </body>
</html>

CodePudding user response：

I found the problem. I used multiple instances of @media and screen (max-width) and it seems like the maximum of uses edge can handle is 4. I fixed it by putting all of the CSS stylings into one instance like this:

@media screen and (max-width: 1000px) {
    .kontaktleiste {display: none;}
    .navigationsleiste {display: none;}
    h2{font-size: }
    p{font-size: }
    .reiter {display: none;}
}

CodePudding user response：

<html>
<head>
<style>
.reiter {
        background-color: rgba(250,250,250,1);
        position: fixed;
        top: 98px;
        height: 64px;
        width: 100%;
        z-index: 9;
        padding-top: 2px;
    }
.switchbtn {
        border: 1px solid #282E34;
        background-color: rgba(250,250,250,1.00);
        color: #282E34;
        padding: 7px 14px;
        font-size: 16px;
        cursor: pointer;
        border-radius: 5px;
        border-color: #282E34;
        transition: all 0.3s;
        width: 12%;
        height: 60px;
    }
@media screen and (min-width: 1000px) { .dropswitch {display: none;} }
@media screen and (max-width: 1000px) {.reiter {display: none;} }

</style>
</head>
<body>
    <div >
   <center>
        <a href="#jumpup">
          <button id="schaltschrankbutton"  type="button" onClick="openschaltschrank()">
            Steuerungs-<br>systeme</button>   
        </a>
        <a href="#jumpup"><button id="ledbandbutton"  type="button" 
         onClick="openledband()">Leucht-<br>lösungen</button></a>
        <a href="#jumpup">
            <button id="dimmerbutton"  type="button" 
                 onClick="opendimmer()">Geräte &<br>Dimmer
          </button>    
        </a>
     </center>
   
 </div>
  <select >
    <option value="1"> Steuerungssysteme        </option>
    <option value="2"> Leuchtlösungen            </option>
    <option value="3"> 
      Geräte & Dimmer
    </option>
  </select>

If any doubt Click Here

CodePudding user response：

You have missed adding meta tag for responsiveness. You should include the following viewport element in all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0">