Ideal Header Size

#1

Hi,

I am trying to help my wife get a blog started. She chose your theme.

Can you tell me what the ideal size is for the header image (or logo, as I believe you call it)? I notice that if I make it too wide, it is shrunk to fit, and so forth.

I know CSS, but I am not really up on responsive web-design, etc., so I thought that it would be more straightforward to ask the question than to go digging in the code.

Just want to optimize the quality of the image, as well as make it look right on desktop and mobile browsers. Thanks.

#2

Hey,

Not really sure what you mean, the logo image is as wide as the header (the inside portion, starting from where the site title is). So that would be 1040px wide, if you want it that big, you can also add a smaller one.

#3

I was wondering about three related questions, really. First, the height and width. Second, whether that was different on mobile. And finally, how it would scale, depending on scenario (resolution, browser width, etc.).

I understand that the idea is that anything should work, but I was looking to make the logo appear at exactly 100% resolution in a normal desktop scenario, and scale down on mobile, if necessary.

If the graphic exactly fit the area allowed in the theme, I figured that it would leave the least room for variables to screw things up. I may be over-thinking it.

#4

Yeap, you are over-thinking it :slight_smile:
The height doesn’t matter, the header will expand to accommodate it. The max-width for the logo is, as I said, 1040px. Because that is the maximum available space. At smaller screen widths the logo will shrink proportionally, just like any image on the website because of this code:


img {
   max-width: 100%;
   height: auto;
}