Online Html Editor

<html> <head> <title> CSS Media Orientation: portrait </title> <style> h2 { padding: 5px; background-color: #04af2f; color: white; text-align: center; } iframe { display: block; height: 200px; } </style> </head> <body> <h2>CSS Media Orientation: portrait</h2> <label id="labelWidth" for="width"></label> <input id="width" type="range" min="120" max="250" step="4" /> <iframe id="block" srcdoc="<style> @media (orientation: portrait) { div { background: lightgreen; } } </style> <div> <h3> To see the effect resize your viewport's width. </h3> <p> When box is in portrait orientation background changes to green color, otherwise background color will remain white. </p> </div>"> </iframe> <script> const updateSize = (size, label) => { block.style[size] = `${eval(size).value}px`; }; width.oninput = () => updateSize("width", labelWidth); </script> </body> </html>