Columns and cards

  • Resolved kallekn

    (@kallekn)


    3 years, 7 months ago

    I am using the “3 column cards” block on my site

    https://www.kniivila.net/

    It looks fine on a big screen, and also works fine on a phone, with stacked cards. But if the browser window is not wide enough for three cards/columns, I get alternately two cards and one. Is there any easy way to avoid this?

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Twentig

    (@twentig)

    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

    Thread Starter kallekn

    (@kallekn)

    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 3 years, 7 months ago by kallekn.
    Plugin Author Twentig

    (@twentig)

    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 ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Columns and cards’ is closed to new replies.

Tags