I have a form with a 3-column layout for a set of checkboxes. As the screen size narrows, the text for each option starts to get hidden behind ellipses, but it maintains the 3-column layout until it finally switches to single-column at mobile sizes. I’d like to set a breakpoint to force the layout to 2-column to prevent the text from getting hidden. How can I do that? Screenshots below.
@media only screen and (max-width:675px) {
// code goes here
}I appreciate the response, but it’s the “code goes here” that I need. I used a ready class to format the columns in the first place, but I can’t switch the class with a media query, so I need to find a way to force the column layout change.