Video Background Sizing to Different Screen Sizes

Beaver Builder
1

Hello!

I have a site I’m working on and the video background is causing me some issues.

The client is currently on a different theme and I’m converting him over to the BeaverBuilder plugin.

  1. Current Live Site: http://eddecosta.com - the video plays and displays great on my laptop screen 15" and on my 24" desktop monitor

  2. On my Genesis / Altitude Pro / BB Plugin set-up the video is not adjusting as it should.
    Dev site: http://eddecosta.tgww.net - password: ascend

If I adjust the padding so faces are not cut off on the larger monitor it is huge on my laptop. If I make it just right on my laptop it is too short and narrow, cutting off faces on my desktop and my clients desktop.

I’ve looked through the forums and saw adjustments for max-width but did not find that helped at all. Is there anything else I can be trying?

Thanks!
~Marta

2

Hey Marta,

Welcome to the BB forums! :slight_smile:

So I guess the problem here is that you want to set different padding values for different screen sizes? We can actually achieve that via media query. You can add a CSS class to that row under the Advanced tab, then we can target it for our custom CSS, e.g., if you place fl-custom-class as the class, you can use the code below.

@media (max-width: 1024px) {
  .fl-custom-class .fl-row-content-wrap {
    padding-top: 0px;
    padding-bottom: 0px;
  }
}

You can then change the values above depending on what you need. The max-width part determines the maximum width of the viewport the styling below it applies to.

Hope this helps! :slight_smile:

Ben

3

Thank you! That does help. Appreciate it.

4

Hi Marta,

Happy to hear your issue has been resolved and thank you for informing us. We appreciate it.

Thanks,
Danny