Responsive Website Tester Tool
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.main {
flex-grow: 1;
}
iframe {
border: none;
height: 100%;
width: 100%;
}
.sidebar {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
.slider-container {
margin-top: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
const viewportWidth = document.getElementById("viewport-width");
const viewportSlider = document.getElementById("viewport-slider");
const iframe = document.querySelector("iframe");
viewportSlider.addEventListener("input", () => {
const width = viewportSlider.value;
viewportWidth.textContent = width;
iframe.style.width = `${width}px`;
});
0
