CODEWITHSUNDEEP
htmlcss
Andrew Hu
Andrew Hu

Reputation: 150

Why won't div become visible when resizing window

I have a problem with the display: none and visibility options in HTML/CSS

I have the scenario set up here https://jsfiddle.net/vntkpus6/5/

HTML: 
<!doctype html>
<body>
<div class="grabber"></div>
</body>
</html>

CSS:
@media (max-width: 800px) {
    .grabber {
        display: block;
        visibility: visible;
    }
}
.grabber {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    height: 40px;
    width: 40px;
    background-color: red;
    background-repeat: no-repeat
}

There must be something I must be missing, it seems like when I resize the window to 800px the square should become visible, yet it doesn't work.

Can anybody tell me what I'm doing wrong? Thanks

Upvotes: 0

Views: 73

Answers (3)

Tanvir Rahman
Tanvir Rahman

Reputation: 709

Here you should use media query after .grabber.Please let me know after doing in below way all things work perfectly or not.

HTML CODE: 

 <!DOCTYPE html>
    <html>
        <head>
            <title>OFFSET</title>
            <link rel="stylesheet" type="text/css" href="style.css" media="all" />
        </head>
        <body>
            <div class="grabber"></div>
        </body>
    </html>

CSS CODE:

.grabber {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    height: 40px;
    width: 40px;
    background-color: red;
    background-repeat: no-repeat;
}
@media all and ( max-width: 800px) {
    .grabber {
        display: block;
        visibility: visible;
    }
}

Upvotes: 0

geoff
geoff

Reputation: 2276

Move your @media query below the .grabber rule set. What is happening is that your second definition of .grabber is overriding what is in the media query. It's just the way CSS works!

Upvotes: 1

AleshaOleg
AleshaOleg

Reputation: 2201

You should to use min-width, it mean "if the width more than 800px use it"

@media (min-width: 800px) {
    .grabber {
        display: none;
    }
}

.grabber {
    top: 0;
    right: 0;
    height: 40px;
    width: 40px;
    background-color: red;
    background-repeat: no-repeat
}

Upvotes: 0

Related Questions