Agency theme – header menu partially reponsive

Community Forums Forums Design Tips and Tricks Agency theme – header menu partially reponsive

This topic is: not resolved

This topic contains 2 replies, has 2 voices, and was last updated by  sundara 2 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #45273

    sundara
    Participant

    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/
    #47051

    Aaron Hartland
    Participant

    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+

    #47178

    sundara
    Participant

    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!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.