6th column creation

you like to have 6 1/6 columns besides ?
in one custom-section?

give a custom ID or custom-class to your color-section : on top you have #custom-section ( custom-section in the unique ID field )
drag 6 containers in the color-section ( it’s a matter of taste what you take. I put 6 1/5 containers in there. But in the end it doesn’t matter, because the width is generated differently) .

Give a custom-class to those containers f.e.: one-sixth
and do not set it to equal-height : this also is done bei flex-layout
align-items: stretch is normal behavior.

on this test-page i decided to have und 990px 3col besides and 2 rows
under 768px 2cols besides and 3 rows
under 480px one col full width:

#custom-section .entry-content-wrapper {
  display: flex !important;
  flex-flow: row wrap;
  justify-content: space-between;
}

#custom-section .entry-content-wrapper::before, 
#custom-section .entry-content-wrapper::after {
  display: none !important;
}

#custom-section .entry-content-wrapper .flex_column {
  flex: 0 1 auto;
  margin: 0 0 4% !important;
  width: unset !important;
}

#custom-section .entry-content-wrapper .flex_column.one-sixth {
  flex-basis: 16%;
}

@media only screen and (max-width: 989px) {
  #custom-section .entry-content-wrapper .flex_column.one-sixth {
    flex-basis: 30%;
    width: unset !important;
  }
}

@media only screen and (max-width: 767px) {
  #custom-section .entry-content-wrapper .flex_column.one-sixth {
    flex-basis: 48%;
    width: unset !important;
  }
}

@media only screen and (max-width: 479px) {
  #custom-section .entry-content-wrapper .flex_column.one-sixth {
    flex-basis: 100%;
    width: unset !important;
  }
}

see here: https://webers-testseite.de/cynthia/macika/

• This reply was modified 4 years, 6 months ago by Guenni007.