Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 4, 2025 at 3:55 pm #1478588
    tixxpff

    Hey guys,
    I have a row of 1/3 columns that break into 1/1 columns at the 989px break point. The problem is that between 990px – 1200px they don’t look good and I need them to behave like 1/2 columns for these screen sizes. I’ve done this is in the past with CSS for other elements (e.g. article slider) by manipulating the element’s width, but I don’t know how to make it work for column elements.
    Here’s a drawing of what I’m trying to achieve to help you better understand: (click me).
    Thank you!

    March 5, 2025 at 6:12 am #1478622
    Ismael

    Hey tixxpff,

    Thank you for the inquiry.

    Where can we check the page? Please create a test page, then provide the URL in the private field so that we can test it.

    Try to move the columns inside a Color Section element, add the class name “av-custom-grid-column” in the Advanced > Developer Settings > Custom CSS Class field, then add this css code:

    @media (min-width: 990px) and (max-width: 1199px) {
    #top .av-custom-column-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px; 
    }
}

    Best regards,
    Ismael

    March 5, 2025 at 7:24 am #1478637
    tixxpff

    Hi Ismael, thank you very much for your quick reply. Do you need a login for the test page, too or just the URL?

    March 5, 2025 at 8:24 am #1478643
    Ismael

    Hi,

    The link to the test page should be enough. Did you try the suggestion above?

    Best regards,
    Ismael

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