Hi,
This responsive layout is the default behavior set by the WordPress block editor. Twentig adds a “Columns stacking” option to change the responsive layout (see screenshot).
You can either set it to “Small screens” to keep a 3-columns layout on tablet devices or set it to “Medium screens” to stack the columns on tablets.
I hope the above is useful to you.
Tom
Ok, thanks, I’ll check that out. But do I understand correctly that there is no easy way to make these cards work the same way they do in a Twenty Twenty blog page, where the 3 column layout turns to 2 columns on a medium sized screen, like here:
https://www.glasnost.se/
There is no way to add a single “card with shadow” block, is there? Other plugins seem to have this, but I’d prefer not to mess around with too many different plugins.
-
This reply was modified 5 years, 1 month ago by
kallekn.
Hi,
Sorry for the late reply.
Unfortunately, it’s not possible to achieve this layout (multiple 3 columns grid turning to 2 columns) with the Columns block.
To create a single “card with shadow” block, you can use the Columns block and set its column number to 1. Then adjust the column width as you like. And if you need to center it, add the tw-justify-center class in the “Additional CSS Class(es)” field of the columns block.
The following code can help you start:
<!-- wp:columns {"className":"tw-justify-center","twColumnStyle":"card-shadow"} -->
<div class="wp-block-columns tw-justify-center tw-cols-card tw-cols-card-shadow"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img src="https://s.w.org/images/core/5.5/don-quixote-02.jpg" alt=""/></figure>
<!-- /wp:image -->
<!-- wp:heading {"level":3} -->
<h3>Single Card</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, commodo erat adipiscing elit. Sed do eiusmod ut tempor incididunt ut labore et dolore.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
I hope the above is useful to you.
Tom
To get a single ‘card with shadow’ block, I’ve been using the ‘two column cards’ pattern and then just deleting one of the cards – the remaining card expands. Seems to work 🙂
