Good morning,
In my footer I would like to be able to have 2 logos on the left and the quick links of my menu on the right.
https://codepen.io/aaashpnt-the-sans/pen/eYwERjL
Can you help me ?
Thank you
If you wrap the ul and the logos in a div width display:flex then you can use margin auto on the left or right to push elements all the way over.
e.g.
<div class="footer-mid">
<p>logo1</p>
<p>logo2</p>
<ul class="socials">
<li><a href="#"><i class="fa-brands fa-facebook"></i>x</a></li>
<li><a href="#"><i class="fa-brands fa-twitter"></i>y</a></li>
<li><a href="#"><i class="fa-brands fa-youtube"></i>z</a></li>
</ul>
</div>
.footer-mid{
flex:1 0 0;
display:flex;
align-items:center;
width:100%;
}
.footer-mid ul{
margin-left:auto;
}
That will make it 100% wide so if you were expecting it to stay in the centre then you’d need to remove the width:100%;
1 Like
The problem is that they are completely aligned to the left and right and I thought I had the logo and quick links aligned to the rest and more or less to the center
You don’t have any natural alignment in that block at all. You are lacking structure again.
I assumed that the code you posted was part of a parent wrapper that was controlling the width in some way (similar to the code I have previously offered you).
In that section the only limiting factor to the width is the max-width:500px that you put on the p element. If you are attempting to match that p element then you would need to do the same with the footer-mid.
e.g. add max-width:500px here:
.footer-mid{
flex:1 0 0;
display:flex;
align-items:center;
width:100%;
max-width:500px;
}
.footer-mid ul{
margin-left:auto;
}
Of course as I said that is micro managing everything as you now have a max-width on the footer-mid that has to match the max-width on the p element. What happens if you then change one without the other or if other elements in that block stretch wider than 500px and your alignment is broken.
You would be better adding the width constraint to the parent in one place instead of individual items.
e.g.
.footer-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
max-width:500px;/* added this*/
margin:auto;/* added this*/
}
Think about the structure of your page and not everything in isolation and aim for a more natural alignment where possible.
1 Like
Thank you for your help and explanation it works.
1 Like
There is no html for those 3 centred icons as they were not in the code you posted. You had the there icons you wanted to the right of the 2 logos.
What is it you are trying to do now and what does the html look like.
If you wanted them spread out then you’d just display:flex on the parent width justify-content: space-between and width:100%;.
Assuming you have a similar ul structure then you’d do this:
.new-socials{
display:flex;
justify-content:space-between;
width:100%;
}
2 Likes
In fact I would have liked to do in the footer like all websites do to have some icons to display and the quick links of my menu.
https://codepen.io/aaashpnt-the-sans/pen/eYwERjL
this kind of footer I would like to have with the links of my menu included in the footer.
If you are talking about the 4 columns in that picture then you would do much the same as you have done with other elements in your page.
It would be a parent element with display:flex and then four child divs to hold each column. The rest is just window dressing.
I would prefer you to try first before I offer code otherwise you will miss the learning experience:)
1 Like
Thank you, I will try to do it myself and I will come back to you if I have a problem.
1 Like
Good morning! To place 2 logos on the left and quick links on the right in your footer, use a flexbox layout. Wrap the logos in a <div> on the left, and wrap the quick links in another <div> on the right, then apply display: flex; justify-content: space-between; to the footer container.
This question has already been answered and was more involved once more details were revealed. Please read the thread fully before posting to make sure you are adding something new to the conversation.
Good morning! I’ve faced a similar issue on my client site project. To achieve this, use a flexbox layout. Put the 2 logos in a container on the left and the quick links in another container on the right. Then, apply flexbox styling to the footer to space them out evenly. This should fix the issue!
Since this thread was already resolved I will close it now. Thanks to all who helped!
1 Like