How do I disable a in a @media query

I made a Binary-Calculator site where I wanted the calc to be in a gray background, but the body was supposed to be black. So i made a black Body and a Div across all the elements i wanted do be in this gray background. Everything works fine on desktop but now where i started optimizing for mobile, i realized i have to “disable” the div which causes the gray background so have a clean black ui without that gray big background line. When i test my @media query on chromes simulated phone everything is positioned right and even the div background disappears. although when I test it on my phone it looks like in the pic. Thank you in advance.

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:[email protected]&display=swap');

/*Desktop*/
@media only screen and (max-width: 2560px) {
body{
    background-color:black;
}

h1{
    font-family:Sans-serif; 
    font-size:60px; 
    text-decoration: underline black;
}
.background-box{
    height:100vh; 
    width:60vw;
    background-color: rgb(42, 42, 42);
    margin:auto;
    text-align:center;
}

.Dezi{
    width:500px;
    height:40px;
    font-size:25px;
}

.rechnen{
    font-family: 'Source Sans Pro', sans-serif;
    font-size:20px;
    height:70px;
    width:400px;
    background-color:white;
    border-width:2px;
    border-color:black;
    border:solid;
    border-width:2px;
    box-shadow: inset 0 0 0 0 white;
    transition:ease-out 0.8s;
}

.rechnen:hover{
    cursor:pointer;
    box-shadow:inset 700px 0 0 0 #000000;
    color:white;
    border-color:white;
}

#operator{
    position:relative;
    top:30px;
    left:290px
}

.result{
    font-family: 'Source Sans Pro', sans-serif;
    font-size:25px;
}

.homebutton{
    font-family: 'Source Sans Pro', sans-serif;
    font-size:22px;
    width:350px;
    height:70px;
    letter-spacing:2px;
    color:black;
    transition: ease-out 0.4s;
    background-color:white;
    float:right;
    position:relative;
    box-shadow:black;
    border-color:rgb(0, 0, 0);
    top:-935px;
    box-shadow:inset 0 0 0 0 white;
    border:solid;
    
}

.homebutton:hover {
    cursor:pointer;
    box-shadow:inset 350px 0 0 0 black;
    color:white;
    border-color:white;
    border-width:2px;
}

.DzBR{
    font-family: 'Source Sans Pro', sans-serif;
    font-size:22px;
    width:350px;
    height:70px;
    letter-spacing:2px;
    color:black;
    transition: ease-out 0.4s;
    background-color:white;
    float:right;
    position:relative;
    box-shadow:black;
    border-color:rgb(0, 0, 0);
    top:-870px;
    left:350px;
    box-shadow:inset 0 0 0 0 white;
    border:solid;
}

.DzBR:hover{
    cursor:pointer;
    box-shadow:inset 350px 0 0 0 black;
    color:white;
    border-color:white;
    border-width:2px;
}
}

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

    body{
        all:unset;
        background-color:white;
        text-align:center;

    }   

    h1{
        font-family: 'Source Sans Pro', sans-serif; 
        font-size:60px; 
        text-decoration: underline black;
    }

    .background-box{
        background-color: unset;
        background-color: white;
    }
    
    
    .Dezi{
        width:500px;
        height:40px;
        font-size:25px;
    }
    
    .rechnen{
        font-family: 'Source Sans Pro', sans-serif;
        font-size:20px;
        height:70px;
        width:400px;
        background-color:white;
        border-width:2px;
        border-color:black;
        border:solid;
        border-width:2px;
        box-shadow: inset 0 0 0 0 white;
        transition:ease-out 0.8s;
    }
    
    .rechnen:hover{
        cursor:pointer;
        box-shadow:inset 700px 0 0 0 #000000;
        color:white;
        border-color:white;
    }
    
    #operator{
        
    }
    
    .result{
        font-family: 'Source Sans Pro', sans-serif;
        font-size:25px;
    }
    
    .homebutton{
        all:unset;
        all:revert;
        font-family: 'Source Sans Pro', sans-serif;
        font-size:22px;
        width:350px;
        height:70px;
        letter-spacing:2px;
        color:black;
        transition: ease-out 0.4s;
        background-color:white;
        float:;
        position:relative;
        box-shadow:black;
        border-color:rgb(0, 0, 0);
        top:;
        box-shadow:inset 0 0 0 0 white;
        border:solid;
        
    }
    
    .homebutton:hover {
        cursor:pointer;
        box-shadow:inset 350px 0 0 0 black;
        color:white;
        border-color:white;
        border-width:2px;
    }
    
    .DzBR{
        all:unset;
        font-family: 'Source Sans Pro', sans-serif;
        font-size:22px;
        width:350px;
        height:70px;
        letter-spacing:2px;
        color:black;
        transition: ease-out 0.4s;
        background-color:white;
        float:;
        position:relative;
        box-shadow:black;
        border-color:rgb(0, 0, 0);
        top:;
        left:;
        box-shadow:inset 0 0 0 0 white;
        border:solid;
    }
    
    .DzBR:hover{
        cursor:pointer;
        box-shadow:inset 350px 0 0 0 black;
        color:white;
        border-color:white;
        border-width:2px;
    }


}

<html>
    <head>
    <link href="DzBRstyle.css" rel="nofollow noreferrer noopener" rel="stylesheet" type="text/css">
    <title>Dezimal zu Binär Rechner</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>

<div class="background-box">

<body>

<h1>Dezimal zu Binär Rechner</h1>

<br>
<br>
<br>
<br>
<br>
<br>



<form action="DzBR.php" method="post">

    <select id="operator" name="operator">
        <option>Dual</option>
        <option>Oktal</option>
        <option>Hexal</option>
    </select>

    <br>
    
    <input class="Dezi" name="Dezi" type="number">
    
    <br>
    <br>
    
    <button name="rechnen" class="rechnen">Rechnen</button>
</form>
</div>

<form action="../hub.php">
<button class="homebutton">Home</button>
</form>

<form action="../Binaer-Dezimal/kayedrechner.php">
<button class="DzBR">Binär zu Dezimal Rechner</button>
</form>

</body>
</html>

Contents hide

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Put that background-box div into the body (not before it) and close it properly (with a </div> tag), then apply display: none; to it where needed (i.e. in a media query).

Method 2

You can use the display:none; in css to “disable” a div, but will also make everything in the div invisible.

Another way is visibility: hidden; which make the div invisible, but it still take up space on the website

Method 3

Set the @media in this way.

/* start with common css for desktop and smartphone */
....

/* high resolution (only desktop) */
@media only screen and (min-width: 850px) and (max-width: 2560px) {
  ....
}

/* low resolution (only smartphone) */
@media only screen and (max-width: 849.98px) {
  ....
}

Using (max-width: 2560px) is not future-proof for the very hi-resolution screens.

Any div can be removed out of the flow with display: none; . Note that everything in it will also not shown.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating