How to get box-shadow left and right only appear seamless on different elements

Question

.row {
  height: 300px;
  width: 300px;
  margin: 0 auto;
  box-shadow: 0 -20px 0px 0px white, 0 20px 0px 0px white, 12px 0 30px -4px rgba(0, 0, 0, 0.3), -12px 0 30px -4px rgba(0, 0, 0, 0.3);
}

<div class="row"></div>
<div class="row"></div>
<div class="row"></div>

.row {
height: 300px;
width: 300px;
margin: 0 auto;
box-shadow: -8px 0 8px -8px black, 10px -1px 8px -8px black;
}

<div class="row"></div>
<div class="row"></div>
<div class="row"></div>

So I have taken a good look regarding this topic: How to get box-shadow on left & right sides only

And the solutions are great. The only problem I have is that this particular site i'm working on has different rows. This causes the box-shadow to be in consistent. Is there anyway to fix this?

I will put up some images as reference.

Hope you guys are able to help me!

First solution: https://i.stack.imgur.com/jzyVk.png

Second solution: https://i.stack.imgur.com/DLx5p.png

First time asking around on stackoverflow. Sorry if somethings are a bit messy — Richie Schuurman, Jun 01 '18 at 14:57

Martin · Accepted Answer · 2018-06-01T14:50:39.563

0

You might want to wrap your elements in a single <div> and then apply your desired effect to it.

But as mentioned in the comments you might want to add a bit of your code in your question.

edited Jun 01 '18 at 14:50

answered Jun 01 '18 at 14:43

Martin

552
4
16

This site is within a Wordpress environment. The page has 4 different sections. Each section is called: vc_row wpb_row vc_row-fluid. This is causing the white spots since they are still separate. – Richie Schuurman Jun 01 '18 at 15:02
1

If this in WP these sections might already have a wrapping div. – Martin Jun 01 '18 at 15:07
Yeah there is a wrapper div inside the row. So it's better to have the box-shadow on the wrapper then on the row? – Richie Schuurman Jun 01 '18 at 15:29
Try on the wrapper as it will be one big shadow rather than multiple small ones on the rows. – Martin Jun 01 '18 at 15:31
1

Thanks a lot! Don't know why I came up with this in the first place. but everything works now. – Richie Schuurman Jun 03 '18 at 08:33

How to get box-shadow left and right only appear seamless on different elements

1 Answers1