Footer Not Enlarging/expanding
I created a website, and I want to expand my footer because right now it looks like this: It should cover the whole website and I tried increasing the width, but that did not work
Solution 1:
https://repl.it/@HussainOmer/SantaKausgithubio-3#index.html
You shared your code in your previous question. You have body with display grid property.
- First, seems you don't use grid at all, you can just delete this property.
- Also you can set
place-items
tostretch
to achieve the same effect. - Seems just setting width of the footer to 100% works fine too
Solution 2:
Is this how you want it to look? I added display grid to anchor's parent, made container's width auto, and at the end added margin auto to anchors themselves:
#footer {
background: #f7f8f9;
color: #45505b;
font-size: 14px;
text-align: center;
padding: 30px0;
}
#footerh3 {
font-size: 36px;
font-weight: 700;
position: relative;
font-family: "Poppins", sans-serif;
padding: 0;
margin: 0015px0;
}
#footerp {
font-size: 15;
font-style: italic;
padding: 0;
margin: 0040px0;
}
#footer.social-links {
margin: 0040px0;
display: grid;
grid-template-columns: auto auto auto;
}
#footer.social-linksa {
font-size: 18px;
display: inline-block;
background: #0563bb;
color: #fff;
line-height: 1;
padding: 8px0;
border-radius: 50%;
text-align: center;
width: 36px;
height: 36px;
transition: 0.3s;
margin:auto;
}
#footer.social-linksa:hover {
background: #0678e3;
color: #fff;
text-decoration: none;
}
#footer.copyright {
margin: 005px0;
}
#footer.credits {
font-size: 13px;
}
<footerid="footer"><divclass="container"><h3>My name</h3><p></p><divclass="social-links"><atarget="_blank"rel="noopener noreferrer"href="https://www.linkedin.com/in/kaustubh-prabhakar/"class="linkedin"><iclass="bx bxl-linkedin"></i></a><atarget="_blank"rel="noopener noreferrer"href=href="https://github.com/SantaKaus"class="github"><iclass="bx bxl-github"></i></a><atarget="_blank"rel="noopener noreferrer"href="https://www.instagram.com/santa_kaus/"class="instagram"><iclass="bx bxl-instagram"></i></a></div><divclass="copyright">©<strong><span>my name</span></strong> 2021
</div></div></footer>
Post a Comment for "Footer Not Enlarging/expanding"