I encountered an issue with some CSS and HTML code. The code works perfectly fine in Chrome and Firefox browsers, but when I try to inspect it using developer tools on mobile view, the min-height:100%; property does not seem to be applied. I have attached a screenshot for reference. It's strange that it works in normal browser view but not in the developer tools. Any insights on why this might be happening? Thank you!
*,
*::before,
*::after {
box-sizing: inherit;
}
* {
position: relative;
}
a,
body,
footer,
header,
h1,
h2,
html,
img,
li,
p,
section,
span,
sup,
ul {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
html {
box-sizing: border-box;
height: 100%;
overflow-x: scroll;
overflow-y: hidden;
width: 210%;
}
body {
background: red;
color: #FFFFFF;
height: 100%;
margin: auto;
overflow: hidden;
width: 210%;
}
section {
display: block;
float: left;
height: 100%;
width: 100%;
}
.test {
float: left;
min-height: 100%;
overflow: hidden;
width: 20%;
}