Search code examples
cssflexboxresponsive-designmultiple-columnsresponsive

Issues with Responsive columns

Hope someone can help me out.

I am trying to have a text divided in 3 columns if on a laptop screen, in 2 columns for a tablet and 1 column for a phone.

I am using the code below and it works well for the 3 columns but the responsive bit is not working, any ideas on how to fix it?

The .about is found inside the container

Tks a lot!!!

.container {
  display: flex;
  align-items: center;

}


.about {

  columns: 3;
  column-fill: balance-all;
  column-gap: 1.5em;
  padding: 2em 4em;
  font: 1em/1.2 "special elite", serif;
  hyphens: auto;
  text-align: center;
  color: black;

}

@media only screen and (max-width: 810px) {
  .about {
    columns: 2;
  }
}
Solution

  • CSS you shared is completely fine but I prefer you to try to use column-count instead of columns.

    Thank you