iframe setup not responsive

[phil2]

phil2

September 17, 2018 at 11:27 am

Hi Team,
On this site I have set up a portfolio of recent projects with an iframe showing the respective website on each single portfolio. Example here.

It looks great on desktop but I think I have broken the responsive behaviour.
As you get below a screenwidth of 1200px, it starts misbehaving, and on a phone it is completely wrong.

My css is:
/* PORTFOLIO OF PROJECTS */
.single-portfolio .videofit iframe {
overflow:hidden;
border: #999999 1px solid;
}

.single-portfolio .videofit {
width: 1020px; height: 768px;
-webkit-transform: scale(.6); -webkit-transform-origin: 0 0;
-moz-transform: scale(.6); -moz-transform-origin: 0 0;
-ms-transform: scale(.6); -ms-transform-origin: 0 0;
-o-transform: scale(.6); -o-transform-origin: 0 0;
transform: scale(.6); transform-origin: 0 0;
}

Please could you help?
Many thanks,
Phil.