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

Question

I'm having an issue with media query. I set the first on at 770px, so that it would re-size without putting the sidebar underneath the main content.
I then set the second media query at 740 (it was at 450, but I changed to 740 for the iPad Mini), thinking this would send the side-bar underneath the main content. (meaning that if held the iPad Mini vertically, it would look the same as it does on iPhone).
This works on my iPhone, but on iPad mini it keeps the 770px settings when viewed vertically (non-landscape mode).
What am I doing wrong? I assumed 740 would be high enough max-width, given that 770 works for landscape mode.
Here is the site: http://www.insidemarketblog.com
and here's the 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 all and (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;
}
}

Answer 1

Try this media query.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}