Issues with Responsive columns-CodePudding

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;
  }
}

CodePudding user response：

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

Thank you

CodePudding user response：

I have added a media query for mobile and an updated media query for tablet.

.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;

}

/*Tablet CSS*/
@media only screen and (max-width: 992px) {
  .about {
    columns: 2;
  }
}

/*Mobile CSS*/
@media only screen and (max-width: 767px) {
  .about {
    columns: 1;
  }
}

    <div >
        
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

    </div>