Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • May 10, 2016 at 6:56 am #629645
    stevegoh422

    Hi guys,

    I have inserted background images (stretch to fit) to 1/2 + 1/2 grid rows but the grid rows don’t seem to be able to resize accordingly and show the entire background images. Also, I can’t seem to slide to the sides to see the missing parts of the image.

    Please refer to the links provided for your reference.
    Note* I have already tried changing the “Mobile Behavior” element of the grid rows but nothing seems to work.

    I need the entire background images to be visible on mobile.
    Eagerly looking for your help, guys!

    May 11, 2016 at 5:47 am #630413
    Ismael

    Hey stevegoh422!

    Thank you for using Enfold.

    Note that the cells will not resize base on the size of the background image. The size of the cells will depend on the content inside.

    Cheers!
    Ismael

    May 12, 2016 at 5:17 am #631115
    stevegoh422

    Thank you, Ismael, for the clarification but I need a solution to the problem.

    Is there a way I can display the whole background images of each grid row? Or perhaps another way for mobile users to display a different page.

    Regards,
    Sean

    May 12, 2016 at 5:52 am #631132
    Vinay

    Hi,

    The solution is to use the image element inside the grid layout if you like the entire image to be visible at all times while re-sizing the window. The gird generally do not resize with respect to the aspect ration of the background images. The browsers calculate the grid ratio depending on the view port width.

    Best regards,
    Vinay

    May 12, 2016 at 6:15 am #631145
    stevegoh422

    Hi Vinay,

    First of all, thank you for telling me that. Ismael has made it clear to me already though.
    What I need is for the images to cover the whole screen like what you see in the link provided for Desktop View and a way for these images to display fully on Mobile View too.

    If I put the background images into the grid row content, it will have whitespaces around each of the background images.
    I don’t mind having whitespaces for Mobile View as long as I can view it whole but I need the images to cover whole screen for Desktop View.

    Is there another way to do it without putting the images as a background image since it cannot be viewed in Mobile View if I do so?

    Best Regards
    Sean

    May 14, 2016 at 8:46 am #632297
    Ismael

    Hi,

    We can the background size property to 100% or let it inherit the dimension of the container, but it will distort the images on certain screen sizes. Please add this css code.

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all .av-flex-cells .no_margin.av-zero-padding {
    background-size: 100% !important;
}
}

    Best regards,
    Ismael

    June 21, 2016 at 4:14 pm #651556
    Dennis_Buis

    I had the same problem.
    My workaround is placing a separator / White space in the cell with the background image.
    Maybe this can help you too …

    Regards Dennis

    June 21, 2016 at 4:32 pm #651565
    Yigit

    Hey Dennis!

    Thanks for sharing! :)

    Regards,
    Yigit

    March 5, 2020 at 5:56 pm #1190517
    friendlier

    Hi Dennis – I’m trying this but can’t seem to get it to work. Can you help with a few details, please?

    Thanks

    Simon

    March 5, 2020 at 9:12 pm #1190651
    Victoria

    Hi friendlier,

    Could you please give us a link to your website, we need more context to be able to help you.

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    March 6, 2020 at 11:06 am #1190809
    Dennis_Buis

    Hi Simon,
    Did you put the seperator in the cell and did you give the seperatot a hight. That prevents the cell to be flat. The hight is something you have to figure out, it depends on what the background is of the cel

    March 9, 2020 at 1:29 pm #1191509
    friendlier

    Hi all,

    Thanks so much for replying, Dennis!

    What I’m trying to do is display the images in their respective 2/5 and 3/5 cells, with graceful resizing on mobile.

    Here’s the site. It’s in development, but I want you both to be able to see it.

    You can see that, although I’ve used “scale to fit” in the upper image and “stretch to fit” for the background image for these cells, on mobile this doesn’t work; the upper one shows the background, the lower one stretches but only the centre of the image is visible. I’d like the entire image to be visible (as upper) but without borders (as lower).

    best

    Simon

    March 10, 2020 at 2:54 am #1191677
    Ismael

    Hi,

    the lower one stretches but only the centre of the image is visible.

    How do you want the image to resize on mobile view? The image has to overflow outside the background positioning area in order to preserve its aspect ratio, and as we suggested previously, we can adjust the size of the image background with css so that it will inherit the dimension of the cell, but it will surely get distorted on certain screen sizes. Setting the background size to “stretch to fit” is your best option. It’s equivalent to having the background-size css property to cover.

    // https://cssreference.io/property/background-size/

    Best regards,
    Ismael

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.