0

Need to make theresponsive layout. I added meta viewpor, but still no luck. Or zoom it out according to screen dimensions to disable usage of horizontal scrollbar.

<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>
<body>

<div class='myIframe'>
<iframe height="800" frameborder="0" scrolling="no" width="466" src="EXAMPLE_WEBSITE"></iframe>

</div>

</body>
</html>
Farhad Mammadli
  • 469
  • 1
  • 5
  • 15

1 Answers1

2

You will need to utilize breakpoints through CSS Media Queries. Please read through Mozilla's documentation.

Example: 

@media (min-width: 700px) { ... }

This tells the browser to render the styles for the page when the minimum width of the viewport is met, which would be 700px.

You should be building with a mobile first approach. Your first stylesheet should reflect this. You will then gradually build up to greater displays.

Remember to use Relative units with Responsive Web Design.

Jonathan Musso
  • 1,374
  • 3
  • 21
  • 45