How to make in Collapsible content the raws to stay side by side in columns of 3 in sense theme

Technical Q&A
1

Adrian49_0-1683224450334.png
Adrian49_0-1683224450334.png670×229 3.77 KB

2

  1. Locate the code that generates the collapsible content section. This could be in a section or snippet file, or within the theme’s Liquid templates.

  2. Identify the HTML markup that generates the rows or containers for each collapsible item. It may involve <div>, <ul>, or <li> elements.

  3. Check if there are any CSS classes or styles applied to these row containers. Look for properties like display, float, or flex.

  4. If the rows are currently displayed vertically (one below the other), you’ll need to modify the CSS to make them display horizontally in columns of 3.

  5. Apply a CSS layout technique such as using a flexbox or grid to achieve the desired column layout. You can set the flex-wrap property to wrap and adjust the widths or flex properties of the individual items to distribute them evenly.

  6. Save the changes and preview your website to see if the collapsible content rows are now displayed in columns of 3.