Adding lists to multiple columns

Support
#1

Hi guys
I have a list of names that I want to have appear in columns in 3 cols in XL, L, and M viewpoints, 2 cols in SM, and 1 column in XS. How do I set this up?
URL https://staging.queenstreetmedical.com.au/about-us-wip/

#2

Hello @philysgdy,

Thanks for writing to us.

I would suggest you please go to the Row->click on the Template ->Set the column layout for each breakpoint as per your design. Please review the screenshot below.

About-The-Tests-Page-Cornerstone-10-23-2025_11_26_PM
About-The-Tests-Page-Cornerstone-10-23-2025_11_26_PM1210×1568 80.6 KB

In case you have not seen the responsive doc, please have a look at the doc to learn more about how to style a responsive layout.

Thanks

#3

Thanks Prakash
I’m across that and was going to check that along the way. Do I set up in 3 cols ie XL viewpoint with 3 lists of 3 items or XS Mobile viewpoint with one list and 9 items?
PS Your link to the position tool was excellent thanks for that.

Just to let you know, Im updating the core to 6.8.3 so there maybe an access issue right now.

#4

Hello Phil,

What will be the order of the list of names? Could it be this?

Name 1  Name 4  Name 7
Name 2  Name 5  Name 8
Name 3  Name 6  Name 9

Then, you can use a 3-column Row element with 3 lists of names in each column. When the screen is smaller, you can collapse the columns to 1, and you will still have the right order of the list of names.

Element Structure:

Row
   Column 1
       List Name 1
       List Name 2
       List Name 3

   Column 2
       List Name 4
       List Name 5
       List Name 6

   Column 3
       List Name 7
       List Name 8
       List Name 9

On the other hand, if you want something like this:

Name 1  Name 2  Name 3
Name 4  Name 5  Name 6
Name 7  Name 8  Name 9

You will need to use a 1 Row element with 9 columns in it, inserting each list of names in each column in particular order.

Element Structure:

Row
   Column 1
       List Name 1
   Column 2
       List Name 2
   Column 3
       List Name 3
   Column 4
       List Name 4
   Column 5
       List Name 5
   Column 6
       List Name 6
   Column 7
       List Name 7
   Column 8
       List Name 8
   Column 9
       List Name 9

With this suggested element structure, you only tweak the Responsive Styling of the Row element as pointed out by @Prakash_s . You do not need to duplicate the rows for each XL or XS screen.

Hope this makes sense.

#5

Hi Rue
Yes, that makes perfect sense. I get it. Spot on as usual. Hope all is well in your camp…
cheers

Phil

#6

Hi Phil,

Glad that we are able to help you.

Thanks