CSS Responsive Issue

Question

For this site: http://www.insidemarketblog.com - you can see that when u resize the window to tablet size, the sidebar goes to the bottom, but the main content retains it's size.

What I want to do is that when the window is resized and sidebar goes below, the main content fills the entire window (no more black space). Resize this for an example: http://www.quicksprout.com/blog/

I thought I set up the @media correctly, but it's not working. Any ideas?

CSS:

   /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
        @media only screen and (min-width: 480px) and (max-width: 767px) {
        .wrap {max-width: 100%}
           .grt {font-size: 100%;}
        }

    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    @media only screen and (max-width: 479px) {
    .wrap {max-width: 98%;}
     .grt {font-size: 87.5%; padding-right: 20px; padding-left: 20px;}
    }

HTML:

<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>

Remove max-width:532px; from line 95 of your CSS file.

adaam
– adaam

2014-04-19 18:58:44 +00:00
Commented Apr 19, 2014 at 18:58 — adaam
– adaam, Commented Apr 19, 2014 at 18:58

adaam · Accepted Answer · 2014-04-19 19:02:38Z

1

Remove the max-width:532px; property from here:

.container, .landing .container {
width: auto;
max-width: 532px;
}

answered Apr 19, 2014 at 19:02

adaam

3,7278 gold badges30 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mister Epic · Accepted Answer · 2014-04-19 19:03:54Z

1

You need to move a style to the appropriate media query block:

@media all and (max-width: 532px){
   .container, .landing .container{width:auto;max-width:532px}
}

answered Apr 19, 2014 at 19:03

Mister Epic

16.8k13 gold badges88 silver badges157 bronze badges

Collectives™ on Stack Overflow

CSS Responsive Issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related