Issue
I am creating a footer section, and for some reason the div
inside a section is taking more width than required. How do I fix this?
This is how it looks:
This is my code:
footer {
background-color: #1a1a1a;
height: 100%;
padding: 4rem;
}
#footer {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
#footer .container {
display: flex;
flex-direction: column;
align-items: flex-start;
/* justify-content: center; */
margin: 0 2rem;
}
#contact-handle {
width: 400px;
}
#contact-handle img {
width: 40%;
position: relative;
right: 0.5rem;
}
#footer h4 {
color: white;
font-weight: 500;
font-size: 18px;
}
#footer p {
color: grey;
font-size: 1rem;
margin: 0;
margin-bottom: 1rem;
text-align: left;
}
#footer i {
color: grey;
margin-right: 1rem;
}
#footer .button {
display: flex;
}
#footer .button img {
width: 15%;
margin-right: 1rem;
}
<footer>
<section id="footer">
<div id="contact-handle" class="container">
<img src="images/logo.png" alt="">
<h4>Contact</h4>
<p>Address: XXX ABCDE Road, Street 32, Mumbai</p>
<p>Phone: (+91) 01234 56789/(+01) 2222 365</p>
<p>Hours: 10:00 - 18:00, Mon - Sat</p>
<br>
<h4>Follow Us</h4>
<div class="social_media">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-youtube"></i>
</div>
</div>
<div id="About" class="container">
<h4>About</h4>
<br>
<p>About Us</p>
<p>Delivery Information</p>
<p>Privacy Policy</p>
<p>Terms & Conditions</p>
<p>Conatct Us</p>
</div>
<div id="Account" class="container">
<h4>My Account</h4>
<br>
<p>Sign In</p>
<p>View Cart</p>
<p>My Wishlist</p>
<p>Track Order</p>
<p>Help</p>
</div>
<div id="App_gateway" class="container">
<h4>Install App</h4>
<br>
<div class="button box">
<img src="images/Footer-img/app-store.png">
<img src="images/Footer-img/google-play.png">
</div>
</section>
</footer>
Solution
You didn't explain what kind of result that you were after, but I assume you want all of the flex children to share the same width: Just add flex-basis: 100%
to give the flex children the same "weight" when determining their lengths.
footer {
background-color: #1a1a1a;
height: 100%;
padding: 4rem;
}
#footer {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
}
#footer .container {
display: flex;
flex-direction: column;
align-items: flex-start;
/* justify-content: center; */
/*margin: 0 2rem;*/
flex-basis: 100%;
}
#contact-handle {
width: 400px;
}
#contact-handle img {
width: 40%;
position: relative;
right: 0.5rem;
}
#footer h4 {
color: white;
font-weight: 500;
font-size: 18px;
}
#footer p {
color: grey;
font-size: 1rem;
margin: 0;
margin-bottom: 1rem;
text-align: left;
}
#footer i {
color: grey;
margin-right: 1rem;
}
#footer .button {
display: flex;
}
#footer .button img {
width: 15%;
margin-right: 1rem;
}
<footer>
<section id="footer">
<div id="contact-handle" class="container">
<img src="images/logo.png" alt="">
<h4>Contact</h4>
<p>Address: XXX ABCDE Road, Street 32, Mumbai</p>
<p>Phone: (+91) 01234 56789/(+01) 2222 365</p>
<p>Hours: 10:00 - 18:00, Mon - Sat</p>
<br>
<h4>Follow Us</h4>
<div class="social_media">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-youtube"></i>
</div>
</div>
<div id="About" class="container">
<h4>About</h4>
<br>
<p>About Us</p>
<p>Delivery Information</p>
<p>Privacy Policy</p>
<p>Terms & Conditions</p>
<p>Conatct Us</p>
</div>
<div id="Account" class="container">
<h4>My Account</h4>
<br>
<p>Sign In</p>
<p>View Cart</p>
<p>My Wishlist</p>
<p>Track Order</p>
<p>Help</p>
</div>
<div id="App_gateway" class="container">
<h4>Install App</h4>
<br>
<div class="button box">
<img src="images/Footer-img/app-store.png">
<img src="images/Footer-img/google-play.png">
</div>
</section>
</footer>
Answered By - Rickard Elimää
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.