Header image width problem on larger screens

[Luketina]

Hello, i have problem with showing of header image on larger screens. Image are not full width ( i get part of image container in white color). On smaller screens to 15 inch or mobile version is all ok.
My image dimension is 1423x556.

[Prasant]

Hello Zvonimir,

Thanks for asking.

Please try adding following CSS under X > Theme Options > CSS:

.x-img {
    width: 100%;
}

Here are some related links for further reading:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

Hope this helps.

[Luketina]

Thank you, this code solved my problem

[christian]

Hey @Luketina,

Though the code solved your problem, it’s not the right solution. That code will make all your Image elements span fullwidth. You might not be experiencing the problem now because 1423 is close to 1920px which I believe is your monitor size so the image does not look pixelated or blurry.

But later on, if you’re going to use a low resolution image, since the code spans the image fullwidth, you’ll find that the image is blurry and sometimes users blame the theme for this.

Please use an image resolution equal to or higher than your monitors x or horizontal resolution. That is the correct setup.

Now that you know this, you might want to remove the code or add it to the Content CSS only and not in globally.

Thanks.