Grow your CSS skills. Land your dream job.

[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.

    link

    http://goo.gl/jZPTbK

    any idea why it is doing that?

    NIX
    # 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.

*May or may not contain any actual "CSS" or "Tricks".