Dropshadow not visible

[philippe_bonneau]

Hi support. On this Pro Integrity stack page https://dev.ecordl.ca

In the Dernières nouvelles row, I have a Content area with an essential grid shortcode [ess_grid alias=“nouvelles accueil”]. In the grid shin I have a drop shadow of 0 6px 12px -4px rgba(0,0,0,.05); tha should display around the box like that

But in the page, the shadow on tje letf side of the first element and the one on the right side of the third element are not visible.

The ro below display an event grid with a visible shadow on the left side. I did not find a fix.

Thanks for the help!

[marc_a]

Hi @philippe11,

Thanks for reaching out.

I just check your website and I can see the drop shadow on your essential grid.

Hope that helps.

Thank you.

[philippe_bonneau]

Look closely @marc_a. The shadow is missing on the left and right side of the row.

[marc_a]

Hi @philippe11,

The box-shadow is just there but it is not visible. In order for us to make the box-shadow visible, we need to add a little CSS code, please add the code in your Pro > Theme Options > CSS. Note that this code is only applied to that specific essential grid only.

#esg-grid-2-1 {
	padding: 0 !important;
}

#esg-grid-2-1 ul.mainul li:first-child {
	left: 2px !important;
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

[philippe_bonneau]

Hi @marc_a. A big thanks for the css. I find that the li:first-child was not necessary and breaking the spacing between the grid elements.

#esg-grid-2-1 {
	padding: 0 !important;
}

#esg-grid-2-1 ul.mainul {
	left: 10px !important;
}

The last thing to fix is to see the shadow at the right of the third box.

[ruenel]

Hello @philippe11,

The shadow of the last post grid item is not visible because the overflow was hidden and it is set in the default css styling of the grid. The default CSS is using this:

.esg-overflowtrick {
    overflow: hidden;
}

Feel free to set the overflow to “visible” and add the resulting code in your other code in your previous reply.

Kindly how it goes.

[philippe_bonneau]

Thanks @ruenel. Solved!

[tristup]

Hi @philippe11,

Glad that we are able to help you.

Thanks