Storefront Max Header Size

Hi,

There’s no ‘max pixel size’. It depends on the font size / screen width etc.

If you can provide a little more information (IE what you’re trying to do) I can offer some more elaborate advice ??

Thanks

Hi,

I want to add a header for the site here: number1donut.com and I want it to look good stretching all the way across. My past experience with non-storefront themes suggests there is a max or “suggested” pixel size for headers.

I think you want to know the size of the Website Width in pixels. If so, it seems to me that Storefront is 1950px. If my Header is 1950 and Background 1950 and centered, then they match up. Any more and Storefront starts to do variable cropping/resizing.

The height of the Header (top to bottom) is variable. The suggested size is 500px but that changes as soon as you remove the Title and Tagline, then it SHRINKS to about 175px. Increase the size font of the Title and/or Tagline (using Plugins) and you can get a larger Header, only it might cause trouble with Menus.

It seems RIDICULOUS but I’m sure it is Web-Designer magic. The variable stuff makes everything (unaltered) look good in any Browser, Screen, Device etc. I’m still looking for a Pay-For Plugin/Extension that gives me more choices in design/layout.

@pcosta88 The difference with Storefront is that it applies the header image to the header background. And the Storefront header is as wide as the browser window. Users can resize their browser so there’s no way of knowing the exact width all the time. Therefore it’s recommended to use an image that is wide as the largest screen resolution you expect visitors to be using. 1950 is a good starting point, but even that wont cover 27″ iMacs at full screen. You have to question whether anyone with a screen that big browses the web in full screen mode, though.

Basically, it’s up to you. I’d use something like 1950 tbh.

@fallingriver the Storefront Designer extension gives you a few additional header layout options (and more).

Cheers

Awesome advice guys! Thanks for the information!

In the customizer under header it says:

“While you can crop images to your liking after clicking Add new image, your theme recommends a header size of 1950 × 500 pixels.”