Is there a way to change the Iframe width vor the mobile and desktop view?

Question

I'm trying to style the iframe on my site with media query. Since the loaded form from the iframe is responsive and looks good in the desktop view, but it looks bad in the mobile view.

If I set the iframe tag width directly to 700 it looks good on the desktop but doesn't fit on the mobile view.

<iframe src="....." frameborder="0" width="700" height="950">Your browser does not support embedded frames (iframes) <a href="...." target="_blank">further</a></iframe>

Update from my CSS:

@media screen and (max-width: 600px) {
  body {
    background-color: blue;
  }

 iframe {
   width: 700px;
 }
}

Best regards

Answer 1

I found a solution for my problem.

I changed the iframe tag from

<iframe src="....." frameborder="0" width="700" height="950">Your browser does not support embedded frames (iframes) <a href="...." target="_blank">further</a></iframe>

to

<iframe src="....." frameborder="0" width="100%" height="950">Your browser does not support embedded frames (iframes) <a href="...." target="_blank">further</a></iframe>

The only thing I needed to change was just width 100%. The iframe is with the 100% now responsive and has also a nice mobile view beside the desktop view.