3

I'm trying to apply a simple shadow to a cards component. Somehow the shadow glitches and looks mirrored and misplaced.

I think it has to do with margin-bottom but there's more to it I can't figure out.

What is the correct approach to let cards have a shadow?

https://jsfiddle.net/qdjeuo65/

<style>
    .card {
      box-shadow: 0 0 10px 0 rgba(100, 100, 100, 0.26);
    }
    
</style>

<div class="card-columns">
    <div class="card">
        <div class="card-body">
            <div class="card-title">title</div>
            <div class="card-text">
                body
            </div>
        </div>
        <div class="card-footer">
            footer
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="card-title">title</div>
            <div class="card-text">
                body
            </div>
        </div>
        <div class="card-footer">
            footer
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="card-title">title</div>
            <div class="card-text">
                body
            </div>
        </div>
        <div class="card-footer">
            footer
        </div>
    </div>
</div>

My browser is Chrome 84.

enter image description here

Daniel W.
  • 31,164
  • 13
  • 93
  • 151
  • 1
    There is something very weird going on, and it is to do with the columns. Basically what you are seeing at the bottom of one card is the shadow of the next one. You can try changing the spacing between them or the size of the shadow, but it is a rather bizarre side effect of the CSS `columns` property – FluffyKitten Aug 13 '20 at 19:45

2 Answers2

4

The problem causes the column-count css property that you use on the card-columns class. You can align cards with flex or add transform: translateZ(0); to the .card class as a workaround.

Anna Miroshnichenko
  • 1,143
  • 1
  • 7
  • 24
  • The `transform` solution is actually working better for me because it does not affect the `width` of the cards like it does with `d-flex`. Compare [this](https://jsfiddle.net/sf4q2hjz/) to [that](https://jsfiddle.net/kc5zem1h/). – Daniel W. Aug 13 '20 at 19:52
1

Please add display: flex; property to .card-columns. That will solve your problem.

Sunny Vaghadia
  • 553
  • 2
  • 6
  • 17
  • Could you explain why this happens without? I'll use Bootstrap's shortcut to display flex: `class="card-columns d-flex"`. – Daniel W. Aug 13 '20 at 19:42
  • 1
    Sure. So, by default card-columns are set to `display: inline-block` to prevent the card breaking across the column. Also, Cards are built with CSS column properties instead of flexbox for easier alignment. Hope you find this helpful. – Sunny Vaghadia Aug 13 '20 at 19:49
  • This breaks the spacing between the cards though... – FluffyKitten Aug 13 '20 at 19:53