CMS collections and nth:child pseudo-classes

Design help CMS
1

Hi everyone,

I’m utilising CMS collections and nth:child pseudo classes to create various layouts for the pages. I’m also including a Lumos framework from Timothy Ricks to control columns, grids and other utility classes.

I’ve got a number of images in portrait which I would like to display next to each other. Is there a way to target them and ensure they have specific column widths and they’re displayed next to each other rather than on top of each other? The photos in question are 4 and 5 in the embedded css.

Once I change one of my variables, the column star and span doesn’t seem to work. Any thoughts would be appreciated!

See below the read-only site.

Here is my public share link: [LINK](Webflow - Spratley & Partners)
(how to access public share link)

2

Hi there,

To arrange images side by side, follow these steps:

  1. Open the Add panel and locate the Columns element under the Other section
  2. Drag the Columns element onto your canvas
  3. Add your images into each column
  4. Adjust column settings in the Element settings panel:
    • Set the number of columns needed
    • Modify column widths as desired
    • Configure responsive behavior for different breakpoints

Each column comes with 10px padding on both sides by default. You can customize this spacing in the Styles panel to achieve your desired layout.

For more detailed guidance on creating web layouts, check out our help article on building web layouts.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Hi,

This doesn’t seem to be related to my query so I would really appreciate someone from the community to engage with me rather than an AI.