html - CSS Responsive issue with iPad Mini in NON-landscape mode (Vertical) -

i'm having issue media query. set first on @ 770px, re-size without putting sidebar underneath main content.

i set second media query @ 740 (it @ 450, changed 740 ipad mini), thinking send side-bar underneath main content. (meaning if held ipad mini vertically, same on iphone).

this works on iphone, on ipad mini keeps 770px settings when viewed vertically (non-landscape mode).

what doing wrong? assumed 740 high enough max-width, given 770 works landscape mode.

here site: http://www.insidemarketblog.com

and here's code html:

div class="container">   <div class="columns">     <div class="content">       <div id="post-1" class="post_box grt top" itemtype="http://schema.org/article" itemscope="">        <div id="comments">       <div class="prev_next"> </div>     </div>   <div class="sidebar" style="height: 560px;"> </div> 

css:

@media , (max-width: 740px) {     .container, .landing .container {         width: auto;         /*max-width: 720px;*/         /*max-width: $w_content;*/         max-width: 100%;     }     .header {         border-top: 1px solid $color1;     }     .landing .header {         border-top: 0;     }     .columns > .content {         /*float: left;*/         float: none;         /*width: 445px;*/         width: 100%;         border: 0;     }     .columns > .sidebar {         /*float: right;*/         float: none;         /*width: 275px;*/         width: 100%;         border-top: 3px double $color1;     }     .menu a, .menu_control {         padding: 1em $x_half;         background-color: #c24f43;     }     .header, .columns > .sidebar, .post_box, .prev_next, .comments_intro, .comment, .comment_nav, #commentform, .comment_form_title, .footer {         padding-right: $x_half;         /*padding-left: $x_half;*/     }     .menu .sub-menu, .children .comment {         padding-left: $x_half;     }     .comments_closed, .login_alert {         margin-right: $x_half;         margin-left: $x_half;     }     .comment_form_title {         margin-left: -$x_half;         margin-right: -$x_half;     }     .right, .alignright, img[align="right"], .left, .alignleft, img[align="left"] {         float: none;     }     .grt .right, .grt .left, .post_box .alignright, .post_box .alignleft, .grt blockquote.right, .grt blockquote.left {         margin-right: 0;         margin-left: 0;     }     .post_author:after {         content: '\a';         height: 0;         white-space: pre;         display: block;     }     .grt blockquote.right, .grt blockquote.left, #commentform .input_text, .sidebar .search-form .input_text, .sidebar .thesis_email_form .input_text {         width: 100%;     }     .post_box blockquote {         margin-left: 0;     }     .comment_date {         display: none;     } } 

try media query.

/* smartphones (portrait , landscape) ----------- */ @media screen , (min-width : 320px) , (max-width : 480px) { /* styles */ }  /* smartphones (landscape) ----------- */ @media screen , (min-width : 321px) { /* styles */ }  /* smartphones (portrait) ----------- */ @media screen , (max-width : 320px) { /* styles */ }  /* ipads (portrait , landscape) ----------- */ @media screen , (min-width : 768px) , (max-width : 1024px) { /* styles */ }  /* ipads (landscape) ----------- */ @media screen , (min-width : 768px) , (max-width : 1024px) , (orientation : landscape) { /* styles */ }  /* ipads (portrait) ----------- */ @media screen , (min-width : 768px) , (max-width : 1024px) , (orientation : portrait) { /* styles */ }  /* desktops , laptops ----------- */ @media screen , (min-width : 1224px) { /* styles */ }  /* large screens ----------- */ @media screen , (min-width : 1824px) { /* styles */ }  /* iphone 4 ----------- */ @media screen , (-webkit-min-device-pixel-ratio : 1.5), screen , (min-device-pixel-ratio : 1.5) { /* styles */ }