Resizing Browser Window Cuts Off Header

[bkerensa]

If I resize the browser window for some reason my header gets cut off on my blog if anyone could help that would be great

http://benjaminkerensa.com/

[askdesign]

It starts to get cut off below 480px browser width.

One solution is to make a duplicate logo that is scaled smaller to fit the smaller browser widths. Give it an identifying name, like "logo-small.png". Then, use use media queries to make the adjustments. You might also need to adjust the min-height. I've left it at 150px here:

/* ---  iPhones (portrait) --- */
@media only screen and (max-width: 320px) {

.header-image .site-title > a {
    background: url("images/logo-small.png") no-repeat scroll left center rgba(0, 0, 0, 0);
    float: left;
    min-height: 150px;
    width: 100%;
}

}

---

Anne S. Katzeff
Designer | Artist | Teacher

[Christoph]

Hi,

this tutorial should solve your problem:
http://thepixelista.com/responsive-genesis-child-theme-logo/

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[askdesign]

Great tutorial @Christoph, thanks for posting.

---

Anne S. Katzeff
Designer | Artist | Teacher

[Carlo]

Hi Benjamin. I hope I understand what you mean. try this code:

.header-image .site-title>a {
	background-size: contain;
}

Add it to the bottom of your theme stylesheet.

---

Comprehensive, easy to follow Genesis documentation

[Author]

Posts