Single image in row with “Stretch row and content (no paddings)” setting

Greetings to the wonderful Xtemos team! I hope you are all having a nice holiday season. 🙂

I have been struggling with a certain feature and I was hoping to receive your assistance.

The scenario:
I create a row with a single image or image gallery element, add a wide image (say 1920px for the sake of this example), set the row to “Stretch row and content (no paddings)” and “Full height row.”

The result:
When viewing the page on a screen that has a resolution higher than the image (for example my 34″ wide monitor), the image is not stretched and there is a white area on both sides.

The workaround has been to set a background image on the row rather than an image inside the row, but the problem is that all of the background settings (Theme defaults, Cover, Contain, No Repeat, Repeat) cause the image to appear incorrectly (zoomed, repeated, etc.)

I am trying to make the single image or image gallery options work and not have to use a background image.

Do you have any tips for me?

Thanks,
Tom

Hello,

In general, the issue is in the image itself, try to define the images wider than 1920px and check the issue again.

Also, you can set the background color for the section that has the “Stretch row and content” option and be sure that this option works correctly.

Kind Regards

Thank you for the prompt reply, Luke.
The “Stretch row and content (no paddings)” settings definitely works properly, I have been using it for years with background colors and such.

For single images/image galleries I always set the image size to “full.” I’m guessing the issue is with the fact that the image is 1920 pixels wide (for example) but the screen’s resolution is wider than that. I’m looking for a way to “force” the image to cover the entire width of the screen even if its resolution is smaller than the screen’s resolution.

Best regards,
Tom

Hello,

Try to use the cover property for the image which would cover the whole area of the section. The only thing to consider here is that if your image size is smaller, it will be stretched out and if you have a bigger image, it will get cut off.

If you still have further questions, please don’t hesitate to reach out.

Kind Regards

Hi Luke, thank you for the reply and on Christmas day no less!

Can you please advise where I am supposed to use the cover property? I tried typing “cover” into the “Image Size” setting in the “Single Image Settings” window, but this just caused the imaged to not be displayed at all. So I’m assuming you were referring to a different location.

Thanks,
Tom

Hello,

Could you please provide access to the admin dashboard so I can check how it looks on your side?

I await your response.

Kind Regards

Sure, here you go.

Seems that the password is wrong, may I request you update it?

https://prnt.sc/JNs28fvkKGSz

Kind Regards

Sorry about that. Can you please try again with the new password I have provided in the private content?

Hello,

You need to define the image as a background of the “Row” because when the image is defined as an element, it will not be stretched as a background.

https://prnt.sc/KQdZZKEEOAkY

So please try to define it as a background and check the issue again.

Kind Regards

Hi Luke, thank you for looking into this for me.

As I mentioned in my original message, when defining the image as a background of the row it appears incorrectly.

This is how the image looks on the manufacturer’s website:
https://prnt.sc/gYUi1lxRQQli

This is how the image looks on my website when I select the “Cover” option with “Full Height Row” unchecked:
https://prnt.sc/MHd7Ia-IJcdE

This is how the image looks on my website when I select the “Cover” option with “Full Height Row” checked:
https://prnt.sc/hS2nP2V_o-pP

As you can see, the image is completely zoomed in.

How can I use the cover mode without having to enable “Full Height Row” and without having to manually define the row height?

Hello,

Sorry for the delay.

In general, all options that are in the “Row” are related to the WPBackery builder, so our theme cannot influent on CSS of the Background-size property.

Here is an explanation of the cover value:

cover
Scales the image (while preserving its ratio) to the smallest possible size to fill the container (that is: both its height and width completely cover the container), leaving no empty space. If the proportions of the background differ from the element, the image is cropped either vertically or horizontally.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Thus, if the picture is blurry and zoomed-in, it is normal and the right work for the cover option because such works CSS.

https://monosnap.com/file/Lui1rTKEN9AJw2Sp2kNcTVGzdIch90

Instead of the “Full Height Row” option, you can define the “Empty space” element inside of this “Row”.

https://prnt.sc/iReZF0aWsioo

Kind Regards

Hi Luke, thank you again for your informative reply. It certainly seems like adding the empty space element is the ideal solution and I will implement this going forward.

By the way, I think you accidentally published the page…this page (along with the rest of the pages of this brand) was supposed to be top secret until January 1st and unfortunately it has now been leaked. 🙁

Hello,

Glad that this solution fits you. We are extremely sorry for the inconvenience with publishing the page.

Kindly accept our sincere apologies for the inconvenience caused to you and don’t hesitate to reach out if you have any additional questions.

Kind Regards

Thank you, Neil, have a happy new year.

Hello,

You are welcome!

In case you need any additional help, I’d be more than happy to assist you.

Wish you all the best.

Kind Regards

[Author]

Posts