1

I have a dynamic CSS grid using a repeater in Oxygen Builder that displays a mix of images and videos from an ACF repeater.

I have used the following CSS which works fine up to 992px.

 .embed-container {
     position: relative; 
     padding-bottom: 56.25%; 
     height: 0; 
     overflow: hidden; 
    max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container embed {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%;
    height: 100%;
}

This works great for both Vimeo and YouTube videos.

But then at 991px or below, the video elements in the grid disappear.

The image and video divs have conditions set to display based on media type which is selected in the ACF Repeater.

I'm pulling my hair out trying to figure out what's going on.

https://early.rubberduckdigital.com/our-work/accedian/

I've tried different div positioning, checked the display conditions and all looks fine until below 991.

Improve this question
3
  • You have something hiding video elements under 991. The inline code changes the video elements directly. This could be a TON of issues. Maybe you have the video block hidden on mobile? It would be better to ask this in the oxygen forums though.
    – rudtek
    Commented Oct 26, 2022 at 15:03
  • Thanks. I've asked on the Oxygen forums too. Nothing yet. I've checked to see if the element is being hidden below 992 and there's nothing set there. I'm baffled.
    – philthebass
    Commented Oct 27, 2022 at 13:29
  • @philthebass Seems like you figured it out because I checked the link and everything seems to be working ok. Please go ahead and mark the question resolved if you've figured it out.
    – Kumar
    Commented Nov 3, 2022 at 7:02

1 Answer 1

Reset to default
0

RESOLVED.

I changed the grid layout to use 2 columns above 992 and 1 col below and added a max-height of 300px to the image and that fixed it.

Thanks for all the input

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.