My slider is coming from another server as an Iframe(wordpress revolution slider but extracted as html and ready to use). If I locally save it to my server as slider.php and call it with php include, the slider area is working just fine when you resize the browser.
This is included in the same server with php include
But if I put an iframe to slider area, when you resize, the iframe height is always same.
This is the one with iframe
How can I achieve this with iframe?
http://late-hill-6932.bss.design this domain has the iframe one.
Please help, thanks.
@kakaoskisilk, you should be able to use media queries to change the height of the iframe.
A slideshow embedded as an iframe. Very kludgy.
Nevertheless, just add something like
height: 32vw; to your styling of the iframe. You might have to play with the number a bit to get it just right.
Hi, Yes but I had to write media queries starting from 1920px until 300px....
The CSS viewport width value doesn't care about media queries. Just add
height: 32vw; to your iframe and resize your browser window. I did this to your site and it worked perfectly.
Wow! Omg thank you! How is this happening?
In CSS, vw stands for "viewport width." The number in front of vw is relative to 1% of the viewport width. You can use the viewport width unit to scale most anything that can normally be scaled with pixels, percentages, rems, ems, points, etc. For example, using vw, you could have your type size scale smoothly depending on the screen width as opposed to setting different sizes at different breakpoints. There is also vmax and vmin, in case you don't want something to get too big or too small.
Study CSS like your life depends on it lol.
Thank you man! I will definetely look at it. Learning everyday! You're a life saver.