Altering size with media queries
So i made this form and decided a good size for it is 50vw, the problem is when the screen gets to around 560-580px the space between it and the edges is too large and it gets squished. I wanted to make it 70vw using a media query but no matter how i type it the query refuses to target the form at all. Here are the html and 2 parts of the css:
<div class="form-parent row">
<div class="form row">
<form id="form1 col-6">
<div class="contact-1">
<h2>Subscribe to our Newsletter</h2>
<p>Sign up for 20% off your first order!</p>
</div>
<div class="contact-2" style="background-color:white">
<li><input type="text" placeholder="Name" name="name" autocomplete="off" required></li>
<li><input type="text" placeholder="Email address" name="mail" autocomplete="off" required></li>
</div>
<div class="contact-3">
<input id="form-btn" type="submit" value="Subscribe">
</div>
<p style="font-size: 11px; padding: 20px 30px 0xp 10px;">*By completing this form you are signing up to receive <br> our emails and can unsubscribe at any time.</p>
</form>
</div>
</div>
CSS:
.form-parent{
max-width: 100%;
margin-top: 50px;
justify-content: center;
align-items: center;
}
.form{
background-color: rgb(255, 250, 227);
border-radius: 15px;
list-style: none;
padding: 30px;
margin: 0px 30px; width: 50vw; } Query: @media (max-width: 576px) { .form{ width: 70vw; background-color: aqua; } }
margin: 0px 30px; width: 50vw; } Query: @media (max-width: 576px) { .form{ width: 70vw; background-color: aqua; } }
4 Replies
"@media (max-width: 576px) {}" - see? I assume you are building it mobile first, so use "@media (minwidth: 576px) {}" to address screens 576px and wider.
its the opposite, its already done for bigger screens and i just need to change it a little for phone screens
When creating a website, is it better to start it mobile screens?
In general, the answer is YES. However, Kevin has a video on the topic, showcasing how it is not aleays the case.
@Furious Please provide a link to a pen instead of the code. If you are doind it desktop-first, the rule look okay and the width needs to be overriden.
@Furious Mkay, I took your code to local and at 576px of width and bellow the "width: 70vw;" kicks in for the .form just fine. What is the DOM inspector showing you?