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 1 year, 3 months ago.

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

    sundara
    Participant
    Post count: 13

    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
    Post count: 37

    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
    Post count: 13

    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.