How to style my 3 column slider - without CSS GRID

[tomasmarek (ThomasM)]

Hello,

I am trying to figure out how to style my 3 column slider. Here is my Figma preview and I’d like to have it exactly the same.

Problems:

1. I need a 37px margin between tabs but not at the edges. I’d like to use a flexbox to grow my tabs to the edges of my 1100px wrapper.

2. Every single tab has box-shadow but it’s hidden under a slider mask. I can’t figure out how to do it.

3. (not that important) I’d like to have my box-shadows under tabs. Theoretically, I’d like to have box-shadows at lower z-index than z-index of the tab backgrounds. Because the shadow of the first tab might be over the second tab and vice versa.

I would appreciate any help.

---

https://vitaslife.webflow.io/

Here is my site Read-Only: https://preview.webflow.com/preview/vitaslife?utm_medium=preview_link&utm_source=dashboard&utm_content=vitaslife&preview=b5b52b88f3c595556d8a6627d9cb9cbf&mode=preview

[carlosdlt (Carlos De La Torre)]

I’m not sure if this will address all your problems but here is what I suggest.

1. Use Grid instead of Flex Box. Once you set the wrapper to Grid just set the Column Gap to 37px under the Edit Grid section.
   

   

2. As far as the box-shadows I don’t believe I fully understand the problem you’re running into. I tinkered with the settings and made it a little less harsh.
   

   

[tomasmarek (ThomasM)]

Yeah, I forgot to mention that. I cannot use the grid because it’s not supported by Internet Explorer. In most scenarios, I’d ignore it but this product is for older customers which still using Internet Explorer (some % of them of course).

Do you think I can found any other workaround?

Related to box-shadows. Well, my shadow blur has to be kinda big. I represent it on this screen.

[tomasmarek (ThomasM)]

Any suggestions, please?