Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • March 19, 2020 at 3:01 pm #1194434
    NorthcoastProject

    Hallo there.

    I have a grid on the middle of the start page ( in the section: UNSER RUNDUM-SORGLOS-PAKET). The grid is splitted in four columns and I want that at a special width it goes down to two columns.
    At a max-width of nearly 720px it goes down to two column but the grid does not work well, the rows somehow jump apart.

    Could you have a look?

    Thanks!

    March 20, 2020 at 6:42 pm #1194861
    Victoria

    Hey NorthcoastProject,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (min-width: 480px) and (max-width: 767px)
  .responsive #top #wrap_all .flex_column.camper-equipment {
      min-height: 400px;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    March 20, 2020 at 7:17 pm #1194870
    NorthcoastProject

    Ok, it has to be at least a min-height of 500px. Now this is fine, but i also want that it breaks down to 2 columns earlier. But when I try to change the width of the grid element one_forth -as with other grids I know- it works not fine.

    @media only screen and (min-width: 767px) and (max-width: 990px) {
    .responsive #top #wrap_all .flex_column.camper-equipment.av_one_fourth {
        width: 47% !important;
    }
}

    Why?

    March 21, 2020 at 3:33 pm #1195087
    Nikko

    Hi NorthcoastProject,

    Try to replace your code with this one:

    @media only screen and (min-width: 767px) and (max-width: 990px) {
  .home #av_section_5 .av-equal-height-column-flextable {
    display: block;
  }

  .responsive #top #wrap_all .flex_column.camper-equipment.av_one_fourth {
    margin-left: 3% !important;
    width: 47% !important;
    display: block;
    float: left;
  }

  .home #av_section_5 .av-equal-height-column-flextable .camper-equipment.av_one_fourth:nth-child(4n+1) {
    clear: both;
  }
}

    Best regards,
    Nikko

    March 21, 2020 at 8:10 pm #1195134
    NorthcoastProject

    This was a good hint!
    With two other adaption I have now the grid as I want it.

    Cool, thanks!

    March 22, 2020 at 6:47 am #1195190
    Rikard

    Hi,

    Great, I’m glad that you found a solution and thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    March 25, 2020 at 6:27 pm #1197792
    NorthcoastProject

    Sorry, it still do not work fine!
    Between 600px and 704px the grid is still out of order.
    Canyou tell me why?
    Thanks!

    @media only screen and (min-width: 600px) and (max-width: 767px) {
    .home #av_section_5 .av-equal-height-column-flextable {
        display: block;
    }

    .responsive #top #wrap_all .flex_column.camper-equipment.av_one_fourth {
        margin-left: 3% !important;
        width: 47% !important;
        display: block;
        float: left;
    }

    .home #av_section_5 .av-equal-height-column-flextable .camper-equipment.av_one_fourth:nth-child(4n+1) {
        clear: both;
    }
}
@media only screen and (min-width: 768px) and (max-width: 990px) {
    .home #av_section_5 .av-equal-height-column-flextable {
        display: block;
    }

    .responsive #top #wrap_all .flex_column.camper-equipment.av_one_fourth {
        margin-left: 3% !important;
        width: 47% !important;
        display: block;
        float: left;
    }

    .home #av_section_5 .av-equal-height-column-flextable .camper-equipment.av_one_fourth:nth-child(4n+1) {
        clear: both;
    }
    .responsive #top #wrap_all .extra-equipment .container {
        width:100%;
        max-width: 100%;
    }
    .responsive #top #wrap_all .extra-equipment .flex_column_table {
        display: inline-flex;
        table-layout: fixed;
        width: 100%;
    }
}
    March 27, 2020 at 10:34 am #1198280
    Nikko

    Hi NorthcoastProject,

    Can you post a screenshot which one you’re referring? there seems to be changes and the code I gave might not apply since it only applies to the 5th Color section.

    Best regards,
    Nikko

    March 27, 2020 at 11:15 am #1198294
    NorthcoastProject

    You are so right. Sorry for that silly request. Thank you!

    March 27, 2020 at 12:38 pm #1198311
    Nikko

    Hi NorthcoastProject,

    We’re glad that we could help. :)
    Just some tip that might help (most likely you already know this) but some people who struggle the same issue might not know who sees this thread
    The .home is page-specific and works only on the homepage, to make it global replace it with #top
    The #av_section_5 is also specific to a Color section, this can be removed to make it global, or use .avia-section so it only applies to all Color section.
    Hope this helps.

    Best regards,
    Nikko

    March 27, 2020 at 12:39 pm #1198312
    NorthcoastProject

    Yes, that is what I did, iI just removed the #av_section_5 and everything is fine.
    Great support, thanks!

    March 27, 2020 at 12:47 pm #1198314
    Nikko

    Hi NorthcoastProject,

    We’re glad to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Responsive grid four forth > two half’ is closed to new replies.