accordion in wp column block

Hi @theart8 ! We checked on this and looks like it’s an issue with Block Editor’s columns. We tried a similar setup but only with normal text and the same alignment issues happen. We would honestly suggest changing your setup to one column for now till the issue has been addressed.

If you’re familiar with using Custom CSS though, I think you can try making a duplicate of your column accordions. Set one to do a two column, the other being one column. Then, we can use Media Query to assign which will show up for desktop or tablet. This can work as a simple workaround. ??

Thank you. Yes I am familiar with Custom CSS, but I didn’t understand well your point.
You mean set up a single column in the WP editor and then make it show as two columns on desktop?

Can you guide me on which code should I use?

What I mean is to create two individual blocks with the same content as your column-accordion setup. Like, we make two different contents: one is only visible to the desktop, the other is only visible to tablet and mobile.

Here are further details on how to do so:

1. Duplicate your entire column setup so you end up having two of them.

2. On your first setup, this one will be the one visible for the desktop only. Your two-column setup can remain as is. All you need to do is to go to your column’s Advanced tab and add your Custom Class (example: custom-class-1): https://i.imgur.com/q5gwtnR.png after that, you add this Custom CSS:

@media only screen and (max-width: 1024px) { 
.custom-class-1 { 
display: none; 
}
}

Adding this will hide your two-column accordion when your screen-width is 1024px and below, which will also avoid the alignment issues coming from Block Editor’s two columns.

What comes next is that, since the two-column accordion is now missing, how are we gonna make a setup that’s for the tablet? This is where the duplicate comes into place.

3. Before you proceed with your second setup, create a Container block and add all your accordion in there. This will help grouping all the accordions into a one column container. This will save a lot of time as you’ll only need to label one block for the Custom CSS.

4. Similar to the two-column accordion, we’re going to use a Custom Class (example: custom-class-2) and add a CSS to make it only visible to tablets:

@media only screen and (min-width: 1025px) { 
.custom-class-2 { 
display: none; 
}
} 

This one, on the other hand, will hide your accordion with one-column if your screen width is 1025px and above.

Hope that this explains it clearly. This is only a workaround since Block Editor’s columns don’t seem to align properly for tablets.

• This reply was modified 6 years, 1 month ago by gambitph.

Yes I got it, thank you. The problem is that the two column accordion is still mis-aligned even on screens larger than 1024px. So This workaround is not so useful. I guess I will wait until the wp column block get updated.