How can I arrange four columns in a row on Symmetry theme?

[harveybarrett]

Hi, 

I'm adding a multicolumn onto my home page and want to have four columns in a row, however if you opt for more than three, it moves the second two columns below the first two.

Can anyone help share how I can have four columns on one row/line of my page? 

Thanks, 

[PageFly-Theodor]

Hi @harveybarrett ,
This is Theodore from PageFly - Shopify Page Builder App.

display four columns in a single row on your homepage:

1. Built-in "Multi-column" section (if available): Check your theme's settings for a "Multi-column" section. If found, adjust the "Number of columns" to 4 and customize spacing as needed.

2. Code editing (advanced users): Access the theme editor and create a new section. Add the provided CSS code to ensure each column occupies 25% width, making them fit in one row. Remember to adjust the width for even distribution and consider adding media queries for mobile responsiveness.

Best regards,
Theodore | PageFly

[harveybarrett]

Hi, do you have the CSS code for this? There's a multicolumn but no option to change the number 

[PageFly-Theodor]

• Theme editor: Go to "Online Store" -> "Themes" -> "Actions" -> "Edit code."
• Sections folder: Locate the "Sections" folder and click "Add a new section."
• Custom section creation: Name the section appropriately (e.g., "Four Columns") and click "Create section."
• CSS code: Add the following CSS code to the newly created section's template file (refer to Shopify's documentation for specific file locations):

.grid__item {
  width: 25%; /* Adjust width as needed for even distribution */
  clear: none;
}
​

[Made4uo-Ribe]

Hi @harveybarrett 

Would you mind to share your store URL? Thanks!