Is it possible to dynamically adjust the font size of form labels and input fields based on browser width?
I've heard that fonts can't automatically 'scale down' when the browser width decreases, requiring media queries instead. I attempted using a media query at the top of my style tags to set label and input font sizes to 10px at a screen size of 1460px, but it didn't work. The rest of my code functions properly, indicating there might be an issue with how I implemented the media query.
If anyone could provide assistance, it would be greatly appreciated. Here is the relevant code snippet:
@media only screen and (max-width: 1460px) {
label input {
font-size: 10px;
}
}
/*Rest of CSS code here*/
<div class="container">
<form action="signin.php" method="post">
<div class="left">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="* Please complete">
</div>
</div>
</div>;
// Rest of HTML code here
</form>
</div>;
// End of code