Furious
KPCKevin Powell - Community
•Created by Furious on 2/24/2024 in #front-end
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; } }
7 replies
KPCKevin Powell - Community
•Created by Furious on 2/13/2024 in #front-end
Zooming into an image
How can i make the image zoom into itself when hovering over it but without changing its size on the website, basically zooming while keeping its width and height. Here is my code:
.sec4{
box-sizing: border-box;
max-width: 100%;
display: flex;
justify-content: center;
margin: 0 1vw;
}
.sec4-sub{
box-sizing: border-box;
overflow: hidden;
position: relative;
text-align: center;
color: white;
margin-bottom: 30px;
transition: transform 0.5s ease;
}
.sec4-sub:last-child{
margin-bottom: 0;
}
.sec4-sub img{
box-sizing: border-box;
width: 700px;
height: 60vw;
filter: brightness(50%);
max-width: 100%;
} .sec4-sub p{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 32px; margin: 0; } .sec4-sub a{ color: white; } .sec4-sub:hover{ filter: brightness(150%); transition: 0.3s; transform: scale(1.1); }
} .sec4-sub p{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 32px; margin: 0; } .sec4-sub a{ color: white; } .sec4-sub:hover{ filter: brightness(150%); transition: 0.3s; transform: scale(1.1); }
8 replies