Video element covers another row in desktop view

[vicstar]

Hi there
This page https://hyphabit.io/the-evolution-of-mobile-and-its-impact-on-iot/ draws fine on mobile (XS & S screen sizes in the preview) but on M, LG & XL previews and on my laptop the video element covers the 2 rows below, that shows an image and some text .
It seems that the height of the video container is set to zero even though the height of the video/iframe is set to greater than zero depending on the width of the screen.
Any help to get this to draw correctly would be appreciated.
Thanks

[prakash_s]

Hello @vicstar,

Thanks for writing to us.

I checked your given page URL it seems that your section is hiding because of your custom CSS code. Please have a look at the given screenshot below.

I would suggest you please remove this custom CSS code from the theme option CSS box or in case if you added it in the page CSS box you can remove it from there.

For the quick fix, you can add this custom CSS code under X/Pro—Theme Option —>CSS

@media(min-width:767px){
  .page-id-424 .x-row-inner {
    flex-direction: row !important; 
}
}

Please note the given code would only work on this page only. The output of the code would be like this. Please have a look at the screenshot given below.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[vicstar]

Thanks. I removed the Global CSS and added it to the home page, where I needed it. The page that wasn’t drawing, now draws fine, thanks for pointing it out. I suspect I might be able configure the elements on the homepage differently to remove the need for any custom CSS, but I’ll have to watch a lot of videos.

Anyway thanks again

[friech]

We are delighted to assist you with this.

Cheers!