CODEWITHSUNDEEP
css
user244394
user244394

Reputation: 13478

CSS media queries not displaying screen sizes correctly

I am currently trying to design a layout which will work for multiple screen sizes. The screen sizes are listed below:

640x960 768x1280 1024x768 1366x768 1280x800 1366x768 1280x1024

Based on the screen sizes, I want the box content height to fit within the screen size, so that there is no vertical scrollbar for a smaller window or any window sizes.

I tried the following, but it doesn't seem to be working correctly for the box, the height doesnt seem to adjust correctly based on the media queires, which is causeing the vertical scrollbar to show up; can someone show how this can be fixed?

@media only screen and (min-width:640px) and (max-height:960px){
    .grid {
        height: 402px;     
        background:#ff3333;
    }
}
@media only screen and (min-width:768px) and (max-height:1280px) {
    .grid {
        height: 612px;     
        background:#33ff33;
        border:11px solid #33ff33 !important;
    }
}
@media only screen and (min-width:1024px) and (max-height:768px){
    .grid {
        height: 302px;     
        background: #55aaff;
        border:11px solid #55aaff !important;
    }
}
@media only screen and (min-width:1366px) and (max-height:768px){
    .grid {
        height: 329px;     
        background:#cccccc;
        border:11px solid #000000 !important;
    }
}
@media only screen and (min-width:1280px) and (max-height:800px){
        .grid {
            height: 539px;     
            background:#cccccc;
            border:11px solid pink !important;
        }
}    

 @media only screen and (min-width:1280px) and (max-height:1024){
                .gridStyle {
                    height: 539px;     
                    background:#cccccc;
                    border:11px solid yellow !important;
                }
 }

Upvotes: 1

Views: 567

Answers (1)

António Regadas
António Regadas

Reputation: 724

Any reason for not wanting a vertical scrollbar? You can just write a width based media query:

@media screen and (max-width: 640px) {

}

@media screen and (max-width: 768px) {

}

etc, and then use overflow-y: hidden;

Upvotes: 1

Related Questions