Home › Forums › WoodMart support forum › Single image in row with “Stretch row and content (no paddings)” setting

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

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • December 23, 2022 at 1:43 pm #430942

    wildguitars
    Participant

    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

    December 23, 2022 at 5:25 pm #431002

    Luke Nielsen
    Keymaster

    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

    December 23, 2022 at 6:14 pm #431017

    wildguitars
    Participant

    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

    December 26, 2022 at 11:19 am #431259

    Luke Nielsen
    Keymaster

    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

    December 26, 2022 at 9:49 pm #431370

    wildguitars
    Participant

    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

    December 27, 2022 at 10:22 am #431440

    Luke Nielsen
    Keymaster

    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

    December 27, 2022 at 11:20 am #431448

    wildguitars
    Participant

    Sure, here you go.

    December 27, 2022 at 11:26 am #431451

    Luke Nielsen
    Keymaster

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

    https://prnt.sc/JNs28fvkKGSz

    Kind Regards

    December 27, 2022 at 1:08 pm #431504

    wildguitars
    Participant

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

    December 28, 2022 at 1:40 pm #431764

    Luke Nielsen
    Keymaster

    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

    December 28, 2022 at 1:53 pm #431769

    wildguitars
    Participant

    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?

    December 29, 2022 at 5:48 pm #432108

    Luke Nielsen
    Keymaster

    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

    December 29, 2022 at 9:48 pm #432137

    wildguitars
    Participant

    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. 🙁

    December 30, 2022 at 10:55 am #432229

    Luke Nielsen
    Keymaster

    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

    January 1, 2023 at 7:57 am #432463

    wildguitars
    Participant

    Thank you, Neil, have a happy new year.

    January 3, 2023 at 11:25 am #432769

    Luke Nielsen
    Keymaster

    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
Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘Single image in row with “Stretch row and content (no paddings)” setting’ is closed to new replies.