Rounded Video Edges / Corners
-
Hej,
I have several rounded objects like videos and images at my page, which worked fine so far.
Created them with a custom class for the corresponding object:
.rounded { box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); border-radius: 18px; overflow: hidden; }
On my new project page I now have the problem that this no longer works.
As soon as the video sits in the second row of the gridder, only the preview image is rounded and the video itself is unfortunately square.
As soon as I put the same video a few rows down, there seems to be no more problems.
I can't figure out why the video is not shown correctly in the second row.
Can someone please help me?Here is the project: The first video in the 2nd row with the bug, further down the same video again with the same class without errors.
PW: anita
Thanks and best regards,
Fabi -
Dear Fabi
@fabiandraxl
That's a really beautiful website, cool! ⭐️
I'm testing on Safari and Chrome, the Bug only seems to apply to Safari. The Class rounded is being applied but not (applied...)
At this point i'm unsure so will need to take a closer look tomorrow and get back to you 🔍
Talk soon
Richard
-
Dear Fabian
@fabiandraxl
I don't really have a clue, buts it's related to the relative position, overriding the Column relative position helped:
.rounded{ position: -webkit-sticky !important; }
Not really the best fix but hopefully will be fine 🌝
Best
Richard
-
Dear @fabiandraxl
Unsure if it's a true bug, haven't seen it before and it only applied to one row on Safari. If the custom Code works fine i hope this is sufficient.
If I see it again with another user i will need to report it as a Bug ✅
Best
Richard
-
Thanks @fabiandraxl have a wonderful day 🌅
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it