Question

How do you adjust the width of the columns for different screen sizes using CSS media queries?

Answer 1

You can adjust the width of the columns for different screen sizes using CSS media queries and specifying different widths for each screen size. Here's an example:

 

@media (max-width: 768px) {
  .column {
    width: 100%;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .column {
    width: 50%;
  }
}

@media (min-width: 1201px) {
  .column {
    width: 33.33%;
  }
}

In this example, the CSS code sets different widths for the columns based on screen sizes. Columns will occupy 100% width on screens up to 768 pixels, 50% width on screens between 769 and 1200 pixels, and 33.33% width on screens larger than 1200 pixels.