Change accordion layout from vertical to horizontal (depending on screen size)

Squarespace accordion only allows vertical layout, no matter the screen size.

I was wondering if it's possible to change the accordion layout to horizontal on wider screens (e.g. desktops).

Here's what I'm trying to achieve:

For mobile screens:

For desktop screens:

7 hours ago, abc said:

For desktop screens:

You would simply need two accordion blocks.

11 minutes ago, Ziggy said:

You would simply need two accordion blocks.

Tried that before. It's not perfect. Two separate accordions do not communicate with each other, in other words, one does not collapse when another opens, etc.

Is there no way to display accordion titles in a row instead of a column?

Try this Custom CSS:

@media only screen and (min-width:940px) {
  .sqs-block-accordion .accordion-items-container {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
  }
}

1 hour ago, Ziggy said:

Try this Custom CSS:

@media only screen and (min-width:940px) {
  .sqs-block-accordion .accordion-items-container {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
  }
}

Right, it split it into two columns, but everything else is messed up. I don't think I have the energy or the expertise to fix it. Been working on my main product list for the last 72 hours. Thanks anyway.

44 minutes ago, abc said:

but everything else is messed up

In what way?

4 minutes ago, Ziggy said:

In what way?

Width, height, padding, margins, all off.

Notice how when you expand the first dropdown, it affects the second one because categories in the first dropdown can't all fit inside its container. In its current state, it would need a lot of fixing.

4 hours ago, Ziggy said:

This would be a different approach:

@media only screen and (min-width: 940px) {
  .sqs-block-accordion .accordion-items-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .sqs-block-accordion .accordion-item {
    width: 50%;
  }
}

 

Perfect! Thank you so much!

4 hours ago, abc said:

Perfect! Thank you so much!

Brill