Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • September 15, 2015 at 11:29 am #503216
    bahamencz

    Hello,
    I’ve been using the Color section to achieve fullscreen images.
    But now I need to have 2 color sections beside each other – each taking 1/2 of fullview.

    Is that achievable?

    September 15, 2015 at 11:39 am #503228
    bahamencz

    In private content I’m sending a link to site – the 1st slide I’d need that image to take 100% of height and width of the 1/2

    This setup is 1 color section with two 1/2s

    I was able to achieve how it looks like by setting CSS:
    .container {padding: 0px;}
    div .av_one_half {margin-left:0%;width: 50%;}

    But would need the image to be like zoomed in over the 1/2

    • This reply was modified 9 years, 3 months ago by bahamencz.
    September 15, 2015 at 2:59 pm #503375
    bahamencz

    Adding:

    main.template-page.content.av-content-full.alpha.units {
    padding: 0;
    }

    .post-entry {
    height: 100%;
    }

    .entry-content-wrapper.clearfix {
    height: 100%;
    }

    .av_one_half {
    height: 100%;
    }

    section.av_textblock_section {
    position: relative;
    /* transform: translateY(-50%); */
    transform: translateY(-50%);
    top: 50%;
    }

    .avia-image-container.av-styling-.avia-builder-el-2.avia-builder-el-no-sibling.avia-align- {
    height: 100%;
    }

    .avia-image-container-inner {
    height: 100%;
    }

    I have achieved what it looks like now – still need to fill the container with the image.

    September 15, 2015 at 3:37 pm #503408
    bahamencz

    What is optimal result is when you’d add this css to class avia_image

    object-fit: cover;
    height: xxx px;
    width: xxx px;

    Where xxx is the resolution of the 1/2

    • This reply was modified 9 years, 3 months ago by bahamencz.
    September 15, 2015 at 5:29 pm #503537
    Elliott

    Hi!

    It would be a lot easier to just use the grid row element with two cells. You can edit each cell to set a background image to each.

    Best regards,
    Elliott

    September 16, 2015 at 12:44 pm #503990
    bahamencz

    Thanks, I was able to make them 100% height by using the Jquery you posted in https://kriesi.at/support/topic/enfold-grid-row-element-set-minimum-height-of-100-browser-height/

    One last problem – on page http://beaufort.rubiq.cz/?page_id=163#kde-nas-najdete – the last cell where there is a google map in cell – I’d need that fullheight too.

    Also when on mobile – the images have very small height and there are 2 images right next to each other – ie IMAGE>text>IMAGE>IMAGE>text>text>IMAGE>IMAGE is it possible to be criss cross ie- Image>Text>Image>Text>Image>Text

    • This reply was modified 9 years, 3 months ago by bahamencz.
    September 17, 2015 at 5:43 am #504495
    Ismael

    Hey!

    I think you managed to apply the height to the cell with the map. Unfortunately, it’s not possible to alter the layout of the cells the way you wanted. This will require custom modifications that is outside the scope of support. Please contact codeable: http://kriesi.at/contact/customization

    Regards,
    Ismael

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