How to work with media queries?

Question

Hello guys I am using the following code to show and hide some elements but it seems to doesn't work on mobile devices.

@media screen and (max-width: 768px) and (orientation : portrait) {
    .drawer1 {
        display: block;
        top: 789px;
    }
    .drawer {
        display: none;
    }
    .drawer1-content {
        background: #fff;
        background-repeat: no-repeat;
        border-collapse: collapse;
        height: 645px;
        width: 100%;
    }
}
@media screen and (min-width: 769px)  {
    .drawer {
        bottom: 0px;
        height: 700px;
        overflow: hidden;
        position: absolute;
        width: 1024px;
        z-index: 5;
    }
    .drawer1 {
        display: block;
    }

Answer 1

..from the code you posted, looks like you miss a } at the end..

Also check if your device has a width less than 768px in the first case and it has a width more than 769px in the second case (landscape or portrait)

try one of the several extensions available on Chrome/Firefox/Opera to set the max width of the viewport and simulate a mobile device..

From the comment: so from the specs: IPAD 3gen: 2048-by-1536 pixel....here you have your answer :D just change the max-width and min-width ..or just use the landscape and portrait attributes