Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 8, 2022 at 3:32 am #1368035
    nV15OoBtg21iTn5z

    If I layout a 2/3 column with a photo and 1/3 column with text…

    When they adjust responsively on mobile, the columns stack above one another — and the photo crops to fit the screen width.

    Is there a way to set the photo to scale to the width of the screen on mobile only (and not have any blank space above or below it either)? This way the entire photo is visible. Or set a zoom level for the cropping so at least more of the photo is visible?

    The responsive crop is too tight.

    I’ve tried playing around with the different image fit settings, but if I “scale to fit” — the photo doesn’t fill the entire column on desktop, and it has white space above and below on mobile.

    October 8, 2022 at 11:18 pm #1368084
    Mike

    Hey nV15OoBtg21iTn5z,
    We could probably offer some css to have the image “cover” the space, which would remove the white space above and below on mobile, but you will lose a little on the sides, unless you want to stretch the image and don’t mind a little distorting.
    Another option would be to clone the element and use an image that is just right for mobile and set the display for the two elements so they only show on the screens you wish.
    If you want some help with the css, please link to your page so we can examine.

    Best regards,
    Mike

    October 11, 2022 at 5:11 pm #1368451
    nV15OoBtg21iTn5z

    Hey Mike!

    Another option would be to clone the element and use an image that is just right for mobile and set the display for the two elements so they only show on the screens you wish.

    This was a great suggestion. It took a little playing around and swapping some elements (like a grid row for a color section).

    But once it was all figured out, I was left with two perfect layout solutions — one for desktop and one for mobile, with each displaying properly on the respective devices.

    I’ll definitely keep this is mind for future issues like that.

    Thank you!

    October 11, 2022 at 6:28 pm #1368463
    Rikard

    Hi,

    Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

    October 17, 2022 at 9:39 pm #1369172
    nV15OoBtg21iTn5z
    This reply has been marked as private.
    October 18, 2022 at 12:31 am #1369175
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Column Photo to Responsive Full Width Pic’ is closed to new replies.