CSS media queries not displaying screen sizes correctly

Vote count:

0

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

640x 960 768x1280 1024x768 1366x768 1280x800 1366x768 1280x1024

Based on the screen sizes the height will be adjusted so that there no vertical scrollbar for a smaller window or any widnow sizes.

I tried the following but it doesnt seem tobe working correctly forthe height and the veritcal scollabr shows 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:1366px) and (max-height:768){
       .gridStyle {
          height: 539px;     
          background:#cccccc;
          border:11px solid yellow  !important;
      }


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


    }

asked 19 secs ago

user244394

1,121

CSS media queries not displaying screen sizes correctly