I want to know how to beautiful iframe to render website.
I know about iframe html tag but I want to know how to add responsive breakpoints to the iframe like in this website.
Just give me some idea how to approach this then I will made it on my own.
Please help me.
The iframe is just an iframe, it hasn’t been styled at all bar 100% width and a set height (600px). It doesn’t have responsive breakpoints or anything, it’s just 100% width. The frame around it is just CSS + some JS listeners on the buttons to change the width of that container element by toggling the classes.
I want to know how to build that border around the iframe.
Give me some idea so, I can implement that.
for example:
<div>
<header>
<!-- header stuff -->
</header>
<iframe />
<div>
div {
background-color: mediumspringgreen;
border-radius: 0.5rem;
overflow: hidden;
}
header {
padding: 0.5rem;
display: flex;
}