How to change the responsive part of Education Theme?

[Mane60]

If you look at this page with your browser window very wide the image looks sharp:

http://www.moneyhow.co.uk/what-are-my-pension-fund-choices-when-i-retire/

When you narrow your browser window, the image compresses and loses its sharpness.    When you narrow the browser window further, the second sidebar goes below the rest of the content and the image widens again, looking sharp again.

To have the image look sharp under a wider range of conditions, I'd like to arrange it so that the theme's first response to the screen narrowing is that the second sidebar moves below the content.

Do you know how could this be achieved?

BTW in the responsive section of the css, there's:

#content {

margin: 30px;

width: 430px;

}

.sidebar-content #content,  .

content-sidebar #content {

width: 590px;

}

If I change this to:

#content {

margin: 30px;

width: 530px;

}

.sidebar-content #content,

.content-sidebar #content {

width: 490px;

}

I achieve what I want for the image, but the primary sidebar goes to the bottom of the page rather than the secondary. How can I make it so that the secondary moves first?

[Mane60]

I thought I'd post the solution that worked for me in case anyone else has the same issue. Here is the css from the responsive part of the Education Theme that solved the problem described in the first post.

@media only screen and (max-width: 1200px) {

#header .wrap,

#inner .wrap,

#footer-widgets,

#footer .wrap {

max-width: 1040px;

}

#header .widget-area {

width: 560px;

}

#content-sidebar-wrap {

width: 880px;

}

#content {

margin: 20px;

width: 530px;

}

.sidebar-content #content,  .content-sidebar #content {

width: 590px;

}

[Author]

Posts