Issue
I am trying to make a footer that displays a button on the left, and 3 social media icons on the right and a copyright text below it which I seem to have working fine. The issue is for mobile im then trying to make it so they all stack on top of one another but the button and icons seem to be overlapping each other.
HTML
<div class="footer">
<div class="footerHeader">
<div>
<a id="login" href="/login" class="btn btn-primary">Sign in</a>
</div>
<div class="socialMedia">
<img alt="Facebook" class="icon zoom" src="/images/facebook.png">
<img alt="Instagram" class="icon zoom" src="/images/instagram.png">
<img alt="Twitter" class="icon zoom" src="/images/twitter.png">
</div>
</div>
<!-- Copyright -->
<div class="footerCopyright">© 2022 Copyright:
<a href="/"> NAME</a>
</div>
</div>
CSS
.footer{
background-color: white;
padding-top:20px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 5px;
max-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.footerHeader{
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: center;
padding: 0px;
width: 100%;
}
.socialMedia{
width: 64px;
height: 64px;
display: flex;
justify-content: space-evenly;
float: right;
}
.icon{
margin-right: 10px;
margin-left: 10px;
width: 64px;
height: 64px;
transition: transform .2s;
}
.footerCopyright{
margin: 10px;
}
Media querys for footer:
.footer{
min-height: 50vh;
justify-content: space-between;
}
.footerHeader{
flex-direction: column;
justify-content: space-evenly;
padding: 0px;
height: 25vh;
}
.socialMedia{
flex-direction: column;
}
.icon{
margin: 0 auto;
margin-bottom: 20px;
}
Solution
This is minimum working demo code in which you can make changes and use it.
.top {
display: flex;
justify-content: space-between;
}
.social-media {
display: flex;
flex-flow: row;
}
.social-media img {
margin-left: 10px;
}
.footerCopyright {
margin-top: 10px;
}
@media screen and (max-width: 480px) {
.social-media {
flex-flow: column;
margin-top: 10px;
margin-bottom: 10px;
}
.social-media img {
margin-left: 0;
margin-top: 10px;
}
.top {
display: block;
}
}
<div class="footer">
<div class="top">
<a href="">Button</a>
<div class="social-media">
<img alt="Facebook" class="icon zoom" src="/images/facebook.png">
<img alt="Instagram" class="icon zoom" src="/images/instagram.png">
<img alt="Twitter" class="icon zoom" src="/images/twitter.png">
</div>
</div>
<div class="footerCopyright">© 2022 Copyright:
<a href="/"> NAME</a>
</div>
</div>
Answered By - DnD2k21
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.