Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 29, 2021 at 7:51 am #1330807
    aruizhuidobro

    Hi team. I am looking for a 6 column grid. Do I need to do it by code ? or there is another solution ? Thanks. G

    November 30, 2021 at 4:15 am #1330910
    Nikko

    Hi aruizhuidobro,

    Please follow this guide from our documentation: https://kriesi.at/documentation/enfold/columns/#six-columns-or-more
    Hope it helps :)

    Best regards,
    Nikko

    December 1, 2021 at 5:38 pm #1331199
    aruizhuidobro

    Hi Nikko, I added the custom label on a test page and added CSS but it is not doing the trick. What type of columns should I add ?

    sample: http://c2350005.ferozo.com/origines/

    December 2, 2021 at 8:46 am #1331257
    Guenni007

    place only the columns that should be part of the flex-container (color-section) and the text-block in an extra color-section before. ( “Las lesiones por trauma …”)

    btw: if you only set your custom-ID (av-extra-columns) – and remove the css you set til now
    – i will optimize your flex code a bit on that. !

    December 2, 2021 at 6:53 pm #1331356
    Guenni007

    f.e.: 

    .responsive #top #wrap_all #av-extra-columns .entry-content-wrapper {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between !important;
}

.responsive #top #wrap_all #av-extra-columns .entry-content-wrapper::before, 
.responsive #top #wrap_all #av-extra-columns .entry-content-wrapper::after {
  display: none;
}

/*** the flex-items ***/
.responsive #top #wrap_all #av-extra-columns .flex_column {
  flex: 0 1 15%;
  margin: 0px !important;
  margin-bottom: 20px !important;
  margin-left: 0px !important;
  padding: 5px;
  width: unset !important;
  background-color: rgba(255,255,255,0.4);
  box-shadow: 1px 1px 5px #aaa;
}

/*** flex-item media queries - to have on iPad that too ***/
@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #av-extra-columns .flex_column {
      flex: 0 1 30%;
      width: unset !important;
  }
}

@media only screen and (max-width: 519px) {
  .responsive #top #wrap_all #av-extra-columns .flex_column {
      flex: 0 1 48%;
      width: unset !important;
  }
}

@media only screen and (max-width: 379px) {
  .responsive #top #wrap_all #av-extra-columns .flex_column {
      flex: 1 1 100%;
      width: unset !important;
  }
}
    December 3, 2021 at 4:17 am #1331384
    aruizhuidobro

    Hi Guenni. it is working perfect. Thank you for your help. This one can be closed.

    December 4, 2021 at 11:15 am #1331529
    Rikard

    Hi aruizhuidobro,

    Great, I’m glad that you got it working, and thanks to @guenni007 for helping out :-)

    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 7 posts - 1 through 7 (of 7 total)
  • The topic ‘6 column grid’ is closed to new replies.