NO BUG: Posts Element Box Shadow is getting clipped on the left and right sides

[riderworks]

Bricks Version: 1.5.6
Browser: Brave 1.45.116
OS: macOS 15.6.1
URL: Blog – Angela Rider

I"m using the Posts Element with the standard Post Query on the Blog page. I added a Box Shadow to the Posts Element (I made it very visible) and it’s getting clipped on the Bricks Container’s left and right sides. This seems like a bug. I haven’t been able to fix it with CSS.

This is a dev site and only this page will display.

Thanks, Doug

[timmse]

Hi Doug,
Thanks so much for your report!

The posts element uses an overflow: hidden by default, that cuts the shadows.
There are two ways to fix the problem:

1. Set the overflow of the post elements to overflow: visible. I’m not sure if the overflow: hidden is still necessary, so please see for yourself if it leads to problems.

root {
  overflow: visible;
}

2. Add a padding left/right to the posts element. The disadvantage is that the posts won’t align with the edges of your container, but the shadows are visible.

Best regards,
timmse

[riderworks]

Thanks timmse,

Using the CSS root worked.

I had previously set the Posts element > Style > Layout > Misc > Overflow to visible, but it didn’t work.

I thought that setting would have worked.

[timmse]

Hey,
The overflow setting applies to “.bricks-layout-inner”, not the “root wrapper”. That’s the reason why it doesn’t work, because the root wrapper still has overflow: hidden.

I’ll have to test if the overflow: hidden is necessary on the root. If not, we can remove it. However, as long it exists, it’s easy to fix.

Best regards,
timmse

[magmedia]

Hello, can someone please help with this issue. I tried all options, but nothing works.

[timmse]

Hi @magmedia ,
In the meantime, the root selector has changed to %root%:

%root% {
  overflow: visible;
}