Logo centering and responsive behavior

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Ben Sibley

    (@bensibley)

    11 years, 6 months ago

    Thanks for the kind words 🙂

    To center the logo, the containing div needs to be the full width of the page. Then, text-align: center; can be applied to center the image:

    .title-info {
  width: 100%;
  text-align: center;
}

    I would add that inside your existing media query.

    For the different logo sizes, it would be pretty easy to use media queries to load the logo at different sizes depending on the screen width. Tracks already does this to a degree, but since you know the size of your logo, you can do this much more precisely with custom code.

    For loading different files for the logo, this is the subject of truly responsive images. Last I checked there was still a lot of debate, but I think we’re closing in on a final solution for how to handle this. It’s pretty confusing and cutting-edge at this point, but this video should help you figure out how to do this.

    Thread Starter ecbkmh

    (@ecbkmh)

    11 years, 6 months ago

    Thanks a bunch Ben! Your trick worked very well! :0)
    Looking forward to upcoming changes on the responsive logo stuff!

    Merci!

    Theme Author Ben Sibley

    (@bensibley)

    11 years, 6 months ago

    You’re welcome 🙂

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

The topic ‘Logo centering and responsive behavior’ is closed to new replies.