Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • March 11, 2025 at 4:13 pm #1479091
    finchkelsey

    hello,

    how do I achieve 3 images over 2 image all centered in the window, I have attached an image. We are looking for this layout to stay 3 over 2 always, not expanding to 2 or collapsing to 1.

    It needs to have an full width image background as well.

    Thank you

    March 11, 2025 at 9:40 pm #1479116
    finchkelsey

    I went with this.. please lmk if there is a way in avia, thanks<div class=”wrapper”>
    <div class=”row1″>
    <span>Item1</span>
    <span>Item2</span>
    <span>Item3</span>
    </div>
    <div class=”row2″>
    <span>Item4</span>
    <span>Item5</span>
    </div>
    </div>

    .wrapper {
    display: grid;
    place-items: center;
    gap: 1rem;
    }
    .row1, .row2 {
    display: flex;
    gap: 1rem;
    }
    span {
    // element styles here.
    }

    • This reply was modified 12 hours, 4 minutes ago by finchkelsey.
    March 12, 2025 at 5:47 am #1479122
    Ismael

    Hi,

    Thank you for the inquiry.

    Have you tried using 1/3 Column elements? To center align the items in the second row, you can apply a left margin to the first item/column in the second row. 

    #top .flex_column.av-akkm-b2445ebeda64d34ec76acb1a0564417e {
    margin-left: 16.5%;
}

    View post on imgur.com

    Best regards,
    Ismael

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