Bulma cards changing width when resizing window

Question

Cards when window is zoomed out

Cards when zoomed in

Is there any way to make the cards not change width when resizing the window with bulma?

   <div class="container">
    <div class="columns">
        <div class="column center">
            <div class="card">
                <div class="card-content columns is-multiline pr-2 pl-2">
                    <div class="column is-12"></div>
                    <div class="column is-12"></div>
                    <div class="column is-12"></div>
                    <div class="is-block column is-12"></div>
                </div>
            </div>
        </div>

Answer 1

You can add a fixed width on the card with CSS, but then you are kinda going against what Bulma wants you to do (keep everything responsive) and it may break your columns.

I think your best bet would be to include some responsive column classes, so that you can specify the width according to the screen size. Untested, but just as an example:

<div class="container">
<div class="columns">
    <div class="column center is-three-quarters-mobile is-two-thirds-tablet is-half-desktop">
        <div class="card">
            <div class="card-content columns is-multiline pr-2 pl-2">
                <div class="column is-12"></div>
                <div class="column is-12"></div>
                <div class="column is-12"></div>
                <div class="is-block column is-12"></div>
            </div>
        </div>
    </div>

More on Bulma responsive columns