Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #631174

    Hi
    I’m trying to emulate the grid rows on the Enfold Travel demo page – DESTINATIONS > BRIDGE TOUR (scroll down to the images/text blocks butting together), and also keeping the responsive layout when reducing the browser width.

    I’ve set up 2 grid rows on the page below, with the cell background images set to stretch, but when you reduce the browser width, the images start to vertically increase size, then when reduced to mobile width, they snap down to thin strips.

    Is there another setting to adjust?

    Details below….thanks

    #632298

    Hey pantoni,

    Thank you for using Enfold.

    We checked the site but it doesn’t exist any more. Note that if you set the background repeat property to “Stretch to Fit”, it will force the image to cover the whole container and let it overflow outside the cell container to maintain its aspect ratio. We can set the background size property to 100% or contain but it will distort the image or leave whitespaces in the cell.

    Best regards,
    Ismael

    #632308

    hi Ismael

    The site does exist (please see below).

    On this page we have set the image cells Background Image to Scroll / Top Left / Stretch to Fit.

    but as you can see when reducing the browser width, the aspect ratios are not maintained and the image heights collapse down on mobile…

    #633435

    Hi,

    If you look closely, you can see that the images’ aspect ratio are maintained but parts of them overflows outside the cells as we explained in our previous post. The cells collapse on mobile view because the cells do not contain anything. Note that the size of the background image do not determine the height of the cells. Edit the cells with the background image then apply a custom css class attribute. (http://kriesi.at/documentation/enfold/ (Purchase code hidden if logged out) -for-all-alb-elements/). Use “elephant-cell” or “balloon-cell” for example or whatever floats your boat. Apply a minimum height to the cells via Quick CSS field:

    @media only screen and (max-width: 767px) {
    .balloon-cell, .elephant-cell {
        min-height: 500px;
    }
    }

    Best regards,
    Ismael

    #880705

    Neither one of the moderators read the question correctly. its nothing to do with the background image. its about the container that you set the background image on in a grid that collapses in mobile view. I have the same frustration. because the “empty container” that contains the background image is no longer next to the other container in the grid it collapses to a thin line. This empty container need to get a height specified once its on smaller screen sizes.

    One way of doing this is to give each “empty grid container” a class attribute and the set a fixed height for this container in the style.css of your child theme ie:

    @media screen and (max-width:768px) {
    .emprty-container {
    height: 300px;
    }
    }

    hope this helps anyone else looking for a solution. this is how i overcame this problem

    #880983

    Thanks Diezel

    #881211

    Hi pantoni,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.