Styling Essential Grid Questions

Support
#1

Hello,

I need some help with the styling of my essential grid.

  1. I applied a shadow with CSS to my grid but the outer most edge of the shadow on the grid gets cut off. How do I make the shadow show all around? This is the code I used:

body .esg-grid .mainul li.eg-item-skin-3-wrapper {
box-shadow: 0px 0px 8px 2px rgba(77, 77, 77,0.32) !important;
-moz-box-shadow: 0px 0px 8px 2px rgba(77, 77, 77,0.32) !important;
-webkit-box-shadow: 0px 0px 8px 2px rgba(77, 77, 77,0.32) !important;
}

  1. In Essential Grid settings I set the item spacing to 27px. How do I make this spacing media friendly? Ie. smaller settings for laptop, tablets, phone, etc.

Thank you! :hugs:

#2

Hi There,

1.) Try adding margin too, so there will be space for box shadow:

    box-shadow: 0px 0px 8px 2px rgba(77, 77, 77,0.32) !important;
    -moz-box-shadow: 0px 0px 8px 2px rgba(77, 77, 77,0.32) !important;
    -webkit-box-shadow: 0px 0px 8px 2px rgba(77, 77, 77,0.32) !important;
    margin: 33px !important; /* Adjust this accordingly*/
}```

2.) Unfortunately, there's seems no settings for that for other screen size. Normally we can use CSS to adjust it, but then due too structure we can't do that because size and spacing is calculated automatically. Adjusting it using CSS might disrupt the calculation of grid item position.

Hope this helps.
#3

Hello,

1.) I added the margin and adjusted from 10px and 50px but for all margins the left side of grid gets cut off. The right side is fine.

Actually, on closer inspection, the left side gets slightly cut off with nothing anyway in certain viewports. It’s still cut off with the shadow and then with the margin, it cuts off even more.

I know it’s getting cut off because I set a slight radius to the bottom corners with Essential Grid and in certain viewports (ie. 1154px) the left bottom corner is sharp instead of rounded. Any ideas why this might be happening?

2.) Got it. Thanks for explaining.

Thanks again!!! :grin:

#4

Hello There,

Thanks for updating in! When you got the screenshot, did you just resized the browser or reloaded the page? Keep in mind that the grid needs to initialize so that it can properly calculate the total width of its container. This is why most of the time, resizing the browser will display differently that reloading the page.

Hope this helps.

#5

Hi,

So the I’ve reloaded the page and resized it with and without the shadow CSS (also with and without the margin), the grid is always cut off on the right side.

I’ve included a video in the private response showing with the shadow and margin CSS and the right side cut off. Can you please check it out and tell me how to fix this issue? I just don’t want that side cut off.

Thanks.

#6

Hi,

It’s because of the margin that was added.

/*apply shadow around grids*/
body .esg-grid .mainul li.eg-item-skin-3-wrapper {
    box-shadow: 0px 0px 8px 2px rgba(77, 77, 77,0.32) !important;
    -moz-box-shadow: 0px 0px 8px 2px rgba(77, 77, 77,0.32) !important;
    -webkit-box-shadow: 0px 0px 8px 2px rgba(77, 77, 77,0.32) !important; 
  	margin: 33px !important;
}

Please remove margin: 33px !important; in your css code.

Thanks

#7

Yes, I put the margin there because the original issue that I had was that the shadow was getting cut off on both sides of the grid (see my first post in this thread) and Lely suggested adding a margin which actually led to other issues (see other posts in thread). So now we’ve done a complete circle back to my original concern.

This is my issue: I would like to have a shadow around each grid and have it display correctly; meaning not have the shadow get cut off on both sides, and not have the grid cut off on the right side. I just want a shadow around each grid.

Thank you.

#8

Hi There,

Let’s not use custom CSS so it will not interfere with the current skin structure. Let’s check current skin. Though I cannot access login URL anymore. It is going back to your frontend. Did you disable it?

#9

Oh forgot about that!

I changed it back just now. Please try again. Thanks

#10

Hello There,

Thanks for getting back to us. Anything that is displayed outside of the column such as the shadows of the items will no longer be visible. Please edit your page back in Cornerstone and add a left and right padding of the column so that you will have enough room for the shadows of the grid items. Padding is needed because margin will not work.

Hope this helps. Kindly let us know.

#11

Hi,

Added the padding for the column in Cornerstone and it didn’t work.

So I googled some more and found this: https://theme.co/apex/forums/topic/essential-grid-shadow-cut-off/. So I added the following code:

.site .esg-overflowtrick {
overflow: visible
}

That did the trick!

Thanks for all your help! :slight_smile:

#12

You are most welcome. :slight_smile: