How to make a static site responsive in frameset and iframe?

Netlify CMS
,
1

I’m building a personal portfolio site, I don’t want to make code visible in inspecting
so i tried this below method, it worked but it’s not responsive. in mobile view it’s same as like web.


I’m using html, css, js, mediaqueries.

2

@harishcalvin I was playing around with tunein.com iframe locally sometime back. I fixed responsiveness by having two similar iframes varying in width wrapped in different containers and targeted each using media queries.

Hope it helps

1 Like
3

@harishcalvin Welcome to the Netlify community.

You don’t want to use frameset because it is not part of the HTML5 specification (and also because they are miserable to deal with), but iframes can be made responsive with a little CSS. I present all my PDF files in iframes, for example, so I give the iframe tag the class of pdf and add this to my CSS style sheet:

.pdf
{
	width: 100%;
	height: 600px;
}

The drawback is that you have to define the height, but for different devices you could use media queries to set a height you feel is appropriate to various device sizes.

1 Like
4

Short answer, don’t bother. You can’t do that.

1 Like