Docs

[Steve123]

Hi

I had trouble making X display my header image at full width of 1200, even though I’d made the image 1200.

One of the support team gave me this code:

.x-logobar-inner .x-container,
.masthead-stacked .x-brand,
.masthead-stacked .x-brand img {
width: 100%;
max-width: 100%;
}

It makes the header full width, yes, but it makes it blurry, as if X has shrunk it and this code is enlarging it. How can I make it display at 1200 when it is 1200 wide, please?

Thanks.

[Steve123]

site – http://stevenleebooks.com/

[Jade]

Hi Steve,

The header image appears blurry on screen sizes more than 1200px because the image file’s width is 1200px so when it gets loaded in larger screens more than 1200px it gets stretched to the entire width of page that causes it to appear blurry.

You will have to produce an image with dimensions large enough that it won’t get stretched in bigger screens.

[Steve123]

Thank you, Jade. I’ll test that.

However, why won’t X display the header properly without extra CSS codes, please? Is that a bug that you are fixing?

[Friech]

Hi There,

No that’s not a bug, that is how container works, container prevents your content go fullwidth. If you look on the Customizer > Layout and Design panel, you would see Site Max Width and Site Width, that is the option that determine the width and max-width of your container. max-width seems not important but it is, what it does is keep your container on a define value (1200px) regardless of the viewer screen.

Now what the code above does is make your container’s max-width and width to 100%. That means 100% of the width of the viewer’s monitor.

And since this css also applied on your header image, your header image will be stretch if the viewer monitor resolution is larger that 1200px (which is the natural width of your image).

Hope this shed some lights.

Cheers!

[Author]

Posts