Streaming live at 10am (PST)

Main wrapper div with overflow:hidden has extra space causing incorrect shadows


#1

https://preview.webflow.com/preview/potolki-fbdd25?preview=59d49492f5a6b269fafb18dc4e3460e6

Hey guys! Here's the link to the new project I'm working on.
The problem I'm facing is that I have a main wrapper ("benefits wrapper") which has some secondary divs inside of it.
I gave overflow:hidden to it so that on hover I can move the inner elements up so that it acts like a deck.

Now straight to the issue - design-wise, I'd like to add a shadow to that "benefits wrapper" however when I gave it the overflow:hidden setting, it has some extra space above it, which causes the shadow to be displayed incorrectly (not only fall off the main div, but also from the corners of that empty space).

Does anyone know what is causing this behavior and how it can be fixed?
I'll appreciate all the suggestions, thanks!


#2

@KayWebbs,

I don't see the condition that you're talking about. Do you have shadows setup on it now? Also, are you talking about the thumbs-up cards panel (Benefits Row)? Or some other section of the site?

If it's Benefits Wrapper, I see space between the wrapper and the image that could be an issue, but without better understanding of what you're talking about and an example... I'm at a loss.

Please clarify this further and put the shadow in place.

Thanks!
~B.


#3

Thank you for the input, @itbrian40 !

Sorry for not making it too clear.
You got me correct - I meant it to be about the thumbs up decks (the whole wrapper).
Now I added the shadows so that you can see where the issue is. I tried setting up fixed height of 370px to either wrapper itself, row or column, but it didn't make any change.

The issue is only there when I set overflow on the "benefits wrapper" to hidden, which is required for the hover effect to work, otherwise the inside-blocks will be seen moving outside of the wrapper.

Will highly appreciate your help, thanks!


#4

@KayWebbs,

Try this...

Click the benefits h3 part of the card slider (red box). Change the top margin of 20px to 0px.

The extra margin at the top of the card disappears.

Running a preview test in the Chrome browser shows that the slide is contained in the box and meets the drop shadow (last card) perfectly.

So, try this out and see what you think. I hope this helps. If this is not what you were talking about, please let me know and I'll try to help further.

Take care,
~B.


#5

@itbrian40

Man, thanks a bunch! That really helps a lot :slight_smile:
Tried it out and achieved exactly what I wanted - will be more precise next time.


#6

@KayWebbs,

You're welcome. Glad it worked out.

Take care,
~B.


#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.