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.