Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 3, 2018 at 1:24 pm #936533
    saquasar

    Hi there,

    I am trying to create a full-width page with an image at the left and 2 other images at the right. I want the 2 images at the right to have equal height with the left image and scaling accordingly at desktop and mobile view.

    The problem is that the 2 images at the right doesn’t resizing right in order to have equal height with the left image.

    I am using the grid row element in avia layout builder.

    How can i achieve that?

    April 3, 2018 at 10:36 pm #936833
    Basilis

    Hey saquasar,

    Your page returns a 404 error.
    Could you please check that?

    Best regards,
    Basilis

    April 3, 2018 at 11:32 pm #936857
    saquasar

    Hi Basili,
    It’s a draft page you have to be logged in with credentials i send you to see the page.

    thanks

    April 4, 2018 at 1:47 pm #937142
    Victoria

    Hi saquasar,

    It is hard to have the images scale perfectly, I can propose you a different solution, please use the code below and see if this works for you:

    
#puzzle-1 .flex_cell.no_margin.av_two_third.avia-builder-el-2 {
      padding: 10px 10px 0 10px !important;
}
#puzzle-1 .flex_cell.no_margin.av_one_third.avia-builder-el-4 {
  padding: 0 !important;
} 
#puzzle-1 .av_textblock_section p {
  margin: -0.5em ;
}
#puzzle-1  .puzzle01, #puzzle-1 .flex_cell.no_margin.av_two_third.avia-builder-el-2 .flex_cell_inner {
  margin: -1em -0.5em -3em -1em;
}

    Let me know what you think.
    Best regards,
    Victoria

    April 4, 2018 at 7:53 pm #937355
    saquasar

    Hi Victoria,

    It is working for the 2 images at the right but not for the image at left.

    Is there a code that i can use to scale also the left image properly or should i have a certain dimensions at the images for width and height? For example the height of the image at left should be equal with the height of right image 1 + right image 2?

    April 5, 2018 at 12:15 pm #937656
    Victoria

    Hi saquasar,

    Try this code instead:

    
#puzzle-1 .puzzle01.puzzle-container {
  overflow: hidden;
  margin: -1em -0em -3em -0.5em !important;
}

#puzzle-1 .flex_cell.no_margin.av_two_third.avia-builder-el-2 {
      padding: 10px 10px 0 10px !important;
}
#puzzle-1 .flex_cell.no_margin.av_one_third.avia-builder-el-4 {
  padding: 0 !important;
} 
#puzzle-1 .av_textblock_section p {
  margin: -0.5em ;
}
#puzzle-1  .puzzle01, #puzzle-1 .flex_cell.no_margin.av_two_third.avia-builder-el-2 .flex_cell_inner {
  margin: -1em -1em -3em -1em;
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

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