Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • August 14, 2020 at 4:27 pm #1237889
    dumdeldidum

    Hi,

    I have a few pages that look good until a certain screen size. On mobile phones, some of the entire rows or specific cells inside the row are too high. See the page link for an example, I am referring to the “News” cell as per screenshot.

    Entire rows: is there a way to set the minimum pixel height only for desktop screen size, and otherwise fall back to default? Avia Builder for Grid Row just lets me define min 500px height but not depending on browser size.

    Cells inside a row: lets say I am happy with the defined 500px minimum pixel height no matter what browser size. What CSS can I use to customise the cell height for the news cell only for mobile browsers? At the moment, its too high on mobile and wastes space.

    Thank you,

    August 15, 2020 at 1:05 pm #1238011
    dumdeldidum

    Hi,
    Anyone, please?

    Thank you,

    August 17, 2020 at 4:39 am #1238336
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.av-layout-grid-container .flex_cell {
    height: auto;
    min-height: auto;
}
}

    Best regards,
    Rikard

    August 18, 2020 at 3:25 pm #1238809
    dumdeldidum

    Thanks Rikard, that lead to the right direction. It partly solved one, when adding !important. I’ve figured out answers to my other queries, so this can be closed. Best,

    August 18, 2020 at 11:37 pm #1238955
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Define cell height for mobile’ is closed to new replies.