Agency theme – header menu partially reponsive

[sundara]

Hi,

I am in the process of developing this site http://www.sarahpowers.com/new/.

The main navigation, included in the header widget, does not resize properly.  It starts resizing and then stops.  I have repeatedly reviewed the CSS and tried to figure it out, I have searched the forum for a solution... unsuccessfully so.

Any input would be greatly appreciated.

Thanks!

http://www.sarahpowers.com/new/

[Aaron Hartland]

In you CSS it looks like you've added styling to .wrap to make it 1020px wide, but haven't also included styling in the media query to have this scale down on a smaller viewport.

/* Responsive Design
------------------------------------------------------------ */

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

.wrap {
width: 100%;
}

(Really you should add it to the list of all the other elements that are being set to width 100%)

You might also want to remove the left & right padding from #footer .wrap

Cheers!

---

Aaron Hartland | http://www.aaronhartland.com
Twitter  |  Facebook  |  LinkedIn  |  Google+

[sundara]

Hi Aaron, adding the CSS you indicated did the trick. Thanks so much for your help!

I am not quite sure what other elements you recommend that I add the ".wrap" class to. Elements under the Responsive Design like this:

/* Responsive Design
———————————————————— */

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

.five-sixths,
.four-fifths,
.four-sixths,
.one-fifth,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fifths,
.three-fourths,
.three-sixths,
.two-fifths,
.two-fourths,
.two-sixths,
.two-thirds {
padding: 0;
width: 100%;
}
}

Again thank you for your help!

[Author]

Posts