The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

[Solved] – responsive question – logo moves when screen size is reduced

  • # June 25, 2014 at 6:37 pm

    hi guys,

    i have a noob question – how do i make make the logo not move when the browser size is reduced? logo is supposed to be perfectly centered, but when it is resized to about 760px it moves up about 30-40px.

    and the menu also changes its position. it moves up slightly.


    any idea why it is doing that?

    # June 25, 2014 at 10:50 pm

    Nice handle.

    We’re going to need a Codepen for this. I’m going to guess that part of the problem is the fact that the logo is wrapped in an h1 that spans the entire wrapper. Without being able to fiddle with the code, we’ll never know.

    # June 26, 2014 at 3:13 am

    There’s a change in the padding on the logo-wrapper div from

    .logo-wrapper {
    padding-top: 55px;
    padding-bottom: 20px;

    to this

    @media only screen and (max-width: 1179px)
    div.header-wrapper .logo-wrapper {
    float: none;
    padding: 30px 0px 30px;
    # June 26, 2014 at 6:50 am

    oooh i think that fixed it! thx!!! it looks ok now, right?

    # June 26, 2014 at 7:32 am

    Looks like it.

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed