Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 16, 2023 at 9:31 pm #1425780
    navindesigns

    On my homepage, I have a section called Industries We Serve, which looks great on desktop bu ton mobile after the third block, there is an empty space, how can I move up the blocks so there are no empty spaces on mobile?

    screenshot. – https://ibb.co/FXvwx31

    Please see url below

    November 17, 2023 at 7:25 am #1425807
    Nikko

    Hi navindesigns,

    Would it be okay if we make it one column instead for mobile?

    Best regards,
    Nikko

    November 17, 2023 at 2:59 pm #1425840
    navindesigns

    can we do 3? 1 just takes up so much space vertically

    November 17, 2023 at 4:32 pm #1425846
    Nikko

    Hi navindesigns,

    The 3rd item will not be visible on the screen if forced to 3, I’ll give two solutions then you can choose whichever you prefer:
    Please replace this code in your Quick CSS:

    @media only screen and (max-width: 767px) {
    .responsive #top.home #wrap_all #av_section_5 .av-equal-height-column-flextable {
        display:grid;
        grid-template-columns: repeat(2,1fr);
        grid-column-gap: 20px
    }

    .responsive #top.home #wrap_all #av_section_5 .av-equal-height-column-flextable .av-flex-placeholder {
        display: none
    }
}

    For 3 columns, replace it with:

    @media only screen and (max-width: 767px) {
    .responsive #top.home #wrap_all #av_section_5 .av-equal-height-column-flextable {
        display:grid;
        grid-template-columns: repeat(3,1fr);
        grid-column-gap: 20px
    }

    .responsive #top.home #wrap_all #av_section_5 .av-equal-height-column-flextable .av-flex-placeholder {
        display: none
    }
}

    For 1 column, please replace it with:

    @media only screen and (max-width: 767px) {
    .responsive #top.home #wrap_all #av_section_5 .av-equal-height-column-flextable {
        display: grid;
        grid-template-columns: 1fr;
        grid-column-gap: 20px;
        margin-top: 0;
    }

    .responsive #top.home #wrap_all #av_section_5 .av-equal-height-column-flextable .av-flex-placeholder {
        display: none
    }

    .responsive #top.home #wrap_all #av_section_5 h1 {
        margin-bottom: 30px;
    }
}

    Hope it helps.

    Best regards,
    Nikko

    November 17, 2023 at 4:37 pm #1425851
    navindesigns

    I really want 2 columns but you code did not work

    see comments below

    November 17, 2023 at 4:52 pm #1425854
    Nikko

    Hi navindesigns,

    This is the expected output for the code I gave:

    can you put the code back?

    Best regards,
    Nikko

    November 17, 2023 at 5:21 pm #1425861
    navindesigns

    I dont need any code for 1 column (the default enfold works for one column)
    I will jusst stick to one colum and create a separate block for mobile that can show 2 columns

    thanks

    November 17, 2023 at 5:22 pm #1425863
    Nikko

    Hi navindesigns,

    I think that’s a simpler work around for it since the current layout is really complex to workaround with even with CSS.

    Best regards,
    Nikko

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