Responsive Header

[krystyn]

The site I'm working on is here: http://www.alliecatreviews.com/

The header is working responsively after changing to a larger header, but I can't figure out how to change the height to get rid of all of the extra space on the smaller devices.

Can somebody point me in the right direction? I'm missing something, I think.

http://www.alliecatreviews.com/

[Jami Howard Mays]

You've got this code:

.header-image #title-area, .header-image #title, .header-image #title a {
     display: block;
     float: left;
     min-height: 200px;
     overflow: hidden;
     padding: 0;
     text-indent: -9999px;
     width: 100%;
}

You'll want to change the min-height within your media queries to something smaller than 200px and that should adjust it.

---

Jami Howard Mays, HBIC, Imaj Works | Athens, Georgia

[krystyn]

Thank you @jami-howard. I will play with that.

I guess that's the best way to try to figure out the height it should be? I've played with the smallest two sizes and I can't get the height to go down any more for the 240 width here: http://www.studiopress.com/responsive/

And, 320 seems to be chopping the width as well, but still leaving too much height.

Do you have any additional suggestions.

[Jami Howard Mays]

Are you familiar with firebug or Chrome developer tools? I'd figure out what you want your media queries to be -- you can find the declared values in your stylesheet and that should be sufficient in giving you an idea of your media breakpoints.

If you play with the header min-height in firebug or Chrome developer tools, you can find the "just right" size that you prefer.

Also, I really don't love the StudioPress responsive tool -- I prefer, for a general view, http://ami.responsivedesign.is/ and for a more specific view, I have a subscription to BrowserStack (a bit pricy, but it saves me SO much time when designing for resonsiveness).

---

Jami Howard Mays, HBIC, Imaj Works | Athens, Georgia

[krystyn]

Thanks for the extra testing link.

I am familiar with firebug, just not sure how to make the changes to play with mobile?

And, I'm puzzled why changing the min-height for the various @media sizes is changing the width of the header again.

[Jami Howard Mays]

The height and width are connected ratio-wise... If you make the height smaller, rather than distort the logo image to smoosh the height and maintain the width, the width will naturally ease with the height. The trick is to find the balance between the two.

It's hard to explain image aspect ratios, so I'll defer to this screencast which, though it's shopify and isn't exactly topical to your header image, should help explain the aspect ratio issue. https://www.youtube.com/watch?v=oiWFh0xUmw4

If your media query breakpoints are, based on your stylesheet:

960
800
600
460
400
300
240

Then you need to sort out the math, based on your header size. It's like, AUGH, algebra. I thought I'd never use you! 🙂

Header Width x Header Height
900 x ?
800 x ?
etc etc

I use Chrome Developer Tools instead of Firebug, but the process it the same. Here's a screenshot where I've set the min-height to 120. Sometimes, it's easier for me to just fiddle with things in developer tools rather than do the math.

Did you set your media query breakpoints or is that how it comes with the theme?

---

Jami Howard Mays, HBIC, Imaj Works | Athens, Georgia

[krystyn]

Yes, I totally follow. The header is actually 1000px, so for the 240px, the height should be right around 50px (give or take). but, when I change the height, it's cropping the image width-wise, but there is still a ton of space height-wise (blank space under the header). Like there is an extra title piece or something I'm missing that is also taking up space?

Oh, and those breakpoints were the ones automatically in the theme.

[Jami Howard Mays]

It's here, looks like:

#header {
background: #e7eceb url(images/header-bg-pattern.png) repeat-x bottom center;
margin: 0 auto;
/* min-height: 107px; */
min-width: 998px;
overflow: hidden;
padding-bottom: 40px;
}

I think it's the padding bottom here.

---

Jami Howard Mays, HBIC, Imaj Works | Athens, Georgia

[krystyn]

Thanks! It was actually that 107px that I commented out:) I did that between asking and looking harder. Sometimes my brain thinks backwards.

On to my algebra problem...to think I loved it in highschool! But, I think I'm getting closer!

[Jami Howard Mays]

Good luck!

---

Jami Howard Mays, HBIC, Imaj Works | Athens, Georgia

[Author]

Posts