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.
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.
Every single tab has box-shadow but it’s hidden under a slider mask. I can’t figure out how to do it.
(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.
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
I’m not sure if this will address all your problems but here is what I suggest.
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.
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.
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.