loading...
Cover image for 🤦‍♂️ Weekly fail (35/2020)
Kentico Kontent

🤦‍♂️ Weekly fail (35/2020)

ondrabus profile image Ondrej Polesny ・1 min read

While working on the styles of my site, I decided to hide a background video for mobile devices (bandwidth reasons). The video was placed in a wrapper to ensure it always occupies the whole available space.

The problem was that later I could not get the video element to be displayed at all. I spent half an hour debugging in multiple browsers and still could not get the element to show up. I was on the edge of calling someone for help when I noticed this:

CSS hiding the wrapper element with display:none

Lesson learned: Always pay attention to the most basic styles (often without any media query restriction) that are applied to parent elements and are hiding on the top of your stylesheet files.

Discussion

pic
Editor guide