I’m working on the page http://www.vikinglocal.com/
Each of my rows has a content slider with one video slide with an embed tag, which I think technically makes them embedded in an iframe.
The content sliders scale to 100% width, which is good, but on smaller screens there’s a huge gap between the rows.
Is there a media query or some CSS I can add to the slider module to fix the scaling issues?
As of right now, the site looks fine but only on 24" desktops. : P
Hey Mohammad,
Sorry but I can’t seem to visit the site?
Ben
That’s weird. I think you can only go to it without the www in front?
http://vikinglocal.com/
That’s weird. I think you can only go to it without the www in front?
http://vikinglocal.com/
Okayokayokay! I think I got it!
I think the problem I’m having is that I was incorporating the background of the row into the OAM, when really, it should be in the row background. : P
I’ll post a link to the page once I have it working.
Nevermind. The solution I thought I had was a false alarm. : P
I DO think I’m on to something though; I think I need to learn Edge Reflow.
I’ll update once I find out more.
Edge reflow didn’t work as a solution either, but I think I found that this isn’t a problem with media queries at all.
What’s working for me is using the following embed tag for a scale to fit youtube video, edited to incorporate the embed tag for the oam that WP Renderer spits out.
<style>.embed-container { position: relative; padding-bottom: 54%; 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%; }</style><div class=‘embed-container’>[oam id=“850”]</iframe></div>
Make sure to check the 100% scale to width box in edge, and change the margin values of the HTML module to -20, then for each new element you add you have to change the “embed-container” value each time it’s mentioned in the code (adding a new number to the end works fine). Then you just have to play around with the padding-bottom value until the iframe fits your oam file perfectly without the scroll bars appearing on the top or bottom.
Hey Mohammad,
We are looking into this and will get back to you shortly.
Thanks!
KC
Hey Mohammad,
Glad you figured it out! And thanks for sharing! 
Enjoy!
Ben