Currently in the process of developing a login page and utilizing @media for improved CSS layout on mobile devices. https://i.sstatic.net/LM8q8.png. The issue is that despite implementing @media rules, the inputs and buttons are not extending to the full width of the container. Any suggestions on how to ensure that the inputs and buttons occupy the entire space available within the container?
Provided below is some relevant code snippets for reference. Appreciate any insights you may offer!
CSS and HTML:
@media (max-width:500px) {
input {
height: 40px;
width: 100%;
display: block;
border-radius: 0px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
}
login-box {
width: 90vw;
border: 0px solid #000000;
display: grid;
}
login-button {
width: 100%;
display: block;
}
login-box-content {
display: grid;
}
}<body>
<all>
<login-wrapper>
<login-box>
<login-box-content>
<login-title>Login</login-title>
<login-input>
<login-label>Username</login-label>
<Br>
<input></input>
</login-input><br>
<login-input>
<login-label>Password</login-label>
<Br>
<input></input>
</login-input>
<login-button onclick="pressed()">
<login-button-content>Login</login-button-content>
</login-button>
</login-box-content>
</login-box>
</login-wrapper>
</all>
<script src="script.js"></script>
</body>