Logo Issue with Responsive Design

Community Forums Forums General Discussion Logo Issue with Responsive Design

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  Robin 2 years, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #32840


    I’m using the Fabri8ted theme on my site (http://www.ifmala.org). I added some code  (#title-area { background: url(images/logo.png) no-repeat; float: left; overflow: hidden; margin: 10px 0 0 0px; width: 200px; }) to the css so I could place the logo in on the left of the header.

    It looks good at full width: http://www.ifmala.org/images/logo-good.jpg

    But whit the responsive design with the page width is less it looks bad: http://www.ifmala.org/images/logo-bad.jpg

    It almost looks as if it is getting cut off on the right side by about 1/2 an inch. It also doesn’t get centered like everything else on the page does.

    I tired using a header graphic, but with the top widgets I have it didn’t seem to work right.

    How can if fix this issue?



    Try editing your style.css around line 2391 to go like this:

    #title-area {
    margin: 0 0 -30px 0;
    padding: 10px 0;
    background: url(images/logo.png) no-repeat center;

    .header-image #title-area {
    width: 100%;

    It’s adding the background rule to the #title-area for smaller screens and updating it to be centered; the .header-image #title-area needs to be set to 100% so that it’s full width. This doesn’t affect the search widget–with the logo centered you might like for that to be adjusted as well. HTH

    I do the best I can with what I’ve got. (say hey on twitter)

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

You must be logged in to reply to this topic.