Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • June 16, 2020 at 3:21 pm #1223066
    RezNation

    hi guys, overall, i am pleased with the look and feel of the website, but I’d like to add a simple effect that seems to be a little bit more difficult to achieve than on the plat form I am more rehearsed on (WP Bakery).

    All i’d like to do is have a full width row with 2 columns. Each column would have a background color or an image as the background and both should be borderless. See example.

    2 columns full width no borders content with margins.png

    How would I be able to achieve this look on this page?

    STORE

    June 16, 2020 at 5:42 pm #1223140
    Victoria

    Hey RezNation,

    You need to use a grid row and in the grid row place 1/2 + 1/2 and use the no margin option for the cell where you et the image as a background.

    Here are the docs for you:

    Grid Row

    Columns

    Best regards,
    Victoria

    June 18, 2020 at 6:12 pm #1223845
    RezNation

    Thanks so much, got it to work but the images on mobile are a little bit of a mess.
    where did i go wrong?

    STORE

    (please check mobile version images image attached

    mobile imags grid row.PNG

    June 19, 2020 at 7:40 am #1223968
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.flex_cell.avia-full-stretch {
  min-height: 300px;
}
}

    Best regards,
    Rikard

    June 22, 2020 at 7:25 pm #1224683
    RezNation

    it only worked but only for the images on the right side of the screen.

    the images on the left side of the screen still do not have a that minimum height applied. that’s strange. please advise.

    June 24, 2020 at 2:09 pm #1225205
    Victoria

    Hi RezNation,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .av-flex-cells .no_margin {
        min-height: 300px;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    June 24, 2020 at 2:55 pm #1225235
    RezNation

    there was a little bit of improvement but intstead of fitting the image into the screen it is now cropped and does not look right at all.

    105498305_2679974202287283_2823152749094074656_n.jpg

    On mobile, as you see the person in the bed is totally cropped of.

    this is only happening to the pictures on the left side of the screen in destkop view.

    the pictures on the right side of the screen look perfect in mobile and desktop view.

    June 24, 2020 at 8:16 pm #1225339
    Guenni007

    even if you get it to work on respecting the aspect ratios of the background-image – if content in the grid-cell gets bigger than the height of the image it will not work:

    see example page: https://webers-testseite.de/grid-row-layout/
    these two images are in an aspect ratio of 16:9 so if no crop should be there the cell should be 50vw width and 28.125vw of height.
    on responsive case i decided to have the text first then the image
    Shrink the screen width.
    And see what happend to the 2nd grid-row when content height is bigger

    June 24, 2020 at 8:31 pm #1225341
    Victoria

    Hi RezNation,

    I cannot see the screenshot.
    Image 2020-06-24 at 21.28.56.png

    Please try this code instead:

    
@media only screen and (max-width: 479px) {
    .responsive #top #wrap_all .av-flex-cells .no_margin {
        min-height: 277px;
        background-size: contain !important;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

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