Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 3, 2022 at 4:43 pm #1334077
    ladefogedpeter

    Hello, I would like to add fullwidth break point to the columns for the screen larger than 989px.
    I have tried custom css in this topic: https://kriesi.at/support/topic/column-fullwidth-break-point-larger-than-989px/
    However this didn’t work for me.

    Can you take a look at it?

    January 4, 2022 at 4:11 am #1334122
    Rikard

    Hey ladefogedpeter,

    I’m not sure I understand what you are looking to achieve, could you try to explain your intentions a bit further please?

    Best regards,
    Rikard

    January 4, 2022 at 9:03 am #1334154
    ladefogedpeter

    1) I have these 2 columns, which are besides each other on a large screen (larger than 989px) large screen
    2) and this is how it looks on smaller screens (smaller than 989px) small screen screenshot

    However I want these columns to be like in the 2nd option for screens which are between 989px and 1200px, but I still want to keep 1st option for screens larger that 1200px

    January 4, 2022 at 11:36 am #1334164
    Rikard

    Hi,

    Thanks for the clarification. Please try this in Quick CSS:

    @media only screen and (min-width: 989px) and (max-width: 1200px) {
.home #av_section_5 .av_three_fifth, .home #av_section_5 .av_two_fifth {
    width: 100%;
}
}

    Best regards,
    Rikard

    January 4, 2022 at 1:07 pm #1334191
    ladefogedpeter
    This reply has been marked as private.
    January 4, 2022 at 3:44 pm #1334219
    Rikard

    Hi,

    Please try this instead:

    @media only screen and (min-width: 989px) and (max-width: 1200px) {
.home #av_section_5 .av-flex-placeholder {
    display: none;
}
.home #av_section_5 .av_three_fifth, .home #av_section_5 .av_two_fifth {
    width: 100%;
}
}

    Best regards,
    Rikard

    January 4, 2022 at 4:49 pm #1334232
    ladefogedpeter
    This reply has been marked as private.
    January 5, 2022 at 5:14 am #1334309
    Ismael

    Hi,

    Try to set the display property of the flex cells from “table-cell” to “block”.

    .home #av_section_5 .av_three_fifth, .home #av_section_5 .av_two_fifth {
    width: 100%;
    display: block;
}

    Make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings afterwards.

    Best regards,
    Ismael

    January 5, 2022 at 9:05 am #1334327
    ladefogedpeter
    This reply has been marked as private.
    January 5, 2022 at 11:23 am #1334344
    Rikard

    Hi,

    I added this CSS to Quick CSS, and it’s working on my end:

    @media only screen and (min-width: 989px) and (max-width: 1200px) {
.home #av_section_5 .av-flex-placeholder {
    display: none;
}
.home #av_section_5 .av_three_fifth, .home #av_section_5 .av_two_fifth {
    display: block;
    width: 100%;
}
}

    Best regards,
    Rikard

    January 5, 2022 at 11:40 am #1334346
    ladefogedpeter
    This reply has been marked as private.
    January 5, 2022 at 1:28 pm #1334364
    Rikard

    Hi,

    Great, I’m glad that it’s working as it should now, and thanks for the update. I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Column fullwidth break point larger than 989px’ is closed to new replies.