Simple CSS change turned terribly hard

  • Adam

    (@golfknob)


    11 years, 8 months ago

    Hello fellow WordPressers,

    I almost feel silly asking for help on this, because it seems like it should be so easy.

    My website is http://theblogninja.com/

    I am trying to get the green header image centered across the top, AND make it responsive when I change the browser width.

    So far, I have only be able to do 1 of them at a time. When I make the header image centered, then it isn’t responsive. When the header image is on the left side (like it is now), then the image is responsive (you can see by dragging in your browser width).

    Anybody have any ideas on how the heck to make it both centered AND responsive? I’m using the Genesis Child Theme.

    Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • stephencottontail

    (@stephencottontail)

    11 years, 8 months ago

    This is a bit hacky and it relies on you knowing exactly the width and height of your logo.

    .header-image .site-title > a {
    background: url(images/logo2.png) no-repeat left;
    min-height: 125px;
    max-width: 600px;
    width: 100%;
    display: block;
    margin: 0 auto;
}

    Replace ‘max-width’ and ‘min-height’ with the pixel dimensions of your logo.

    Thread Starter Adam

    (@golfknob)

    11 years, 8 months ago

    Hi stephencottontail,

    Thanks for that snippet! I tried it, however, and while the header logo is now centered…it doesn’t seem to be responsive..

    Any ideas?

    stephencottontail

    (@stephencottontail)

    11 years, 8 months ago

    Oh sorry, I forgot something. Try this:

    .header-image .site-title a {
background: url(images/logo2.png) no-repeat center;
min-height: 125px;
width: 100%;
max-width: 600px;
display: block;
margin: 0 auto;
background-size: contain;
}
    Thread Starter Adam

    (@golfknob)

    11 years, 8 months ago

    Great!! Looks like that worked, thank you!

    The only thing I see that happened by adding that code though was that it added a little extra white space under the image. Not sure why though…

    Any ideas on how to get rid of that space?

    stephencottontail

    (@stephencottontail)

    11 years, 8 months ago

    Probably not. You may be better off taking an entirely different approach, instead. In your HTML, try this:

    <a class="home-link" href="hyperlink">
    <img src="path/to/image">
</a>

    And in your CSS:

    .home-link img {
	margin: 0 auto;
	width: 100%;
}
    Thread Starter Adam

    (@golfknob)

    11 years, 8 months ago

    I’d love to try that, but to be honest I’m a little unsure how…

    I don’t know how to add that, and at the same time what stuff I need to be deleting from my current site so that I don’t have double images up..

    Thread Starter Adam

    (@golfknob)

    11 years, 8 months ago

    I actually just figured it out. The space was from the site description, so I removed the site description in the PHP functions and it looks good now. Thanks a million for your help!

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

The topic ‘Simple CSS change turned terribly hard’ is closed to new replies.