Footer buttons aligning weirdly at large width

Footer buttons aligning weirdly at large width
0.0 0

#1

Hi Everyone,

I am working on the portfolio page project for freeCodeCamp and I have run into a problem with my buttons aligning strangely when the width of the window gets to about 1200-1500 pixels. Instead of being in a row like I want them, they become a 3 on top, 1 on bottom thing and then if you go wider, a 4x4 grid.

I tried changing the width of the wrapper div (topFooter__item) to ensure they have enough space to display. It did not seem to have any effect.


#2

The reason is because you have a left and right margin of 10vw in the two <div>s that contain the information in the footer, and that the container is of fixed width. I suspect that you are doing that because you want to space the two <div class="topFooter__item">s out evenly.

The better way to go about this is to remove the left and right margins completely for the two <div class="topFooter__item">s and just rely on flexbox’s justify-content: space-around completely. To do that:

  1. Remove left and right margins for the topFooter__item class
  2. Remove display: flex for <div class="topFooter"> because it’s not actually doing anything (well, other than making things difficult!)
  3. For <div class="footerMiddleHolder>", add justify-content: space-around

And that should fix the issue!

Perhaps worth noting, since you are already using flexbox, is that if you ever find your self creating the 1-dimension layout by using margins similar to what you have done, there is most likely a more elegant solution using flexbox.

I hope that helps! :smile:

EDIT: @SnowdenWintermute—and I wanted to say, but forgot to earlier, that the artwork is really cool!


#3

.footerMiddleHolder{
display: flex;
flex-direction: row;
max-width: 1500px; //changed this value to 1500px
margin: 0 auto;
padding: 0;
}
@media (max-width:1023px){
.footerMiddleHolder{
flex-direction: column;
}
.topFooter__item{
padding-bottom: 3vw;
}
}
.topFooter__item{
max-width: 1500px; //changed this value to 1500px

The above solution may be better in the long run.


#4

Thank you so much for helping! It works perfectly. I am still new to flexbox and never tried the space around feature before.

The artwork is my mom’s. I’ll tell her she has a fan!


#5

Is this in addition to @honmanyau 's technique? I see you have changed the max-width to 1500px from 1023px. Is that because desktop monitors are getting to be higher res?


#6

I see! The best way to learn is just to make a simple Pen and experiment with it; you may also find part of this article helpful.

And please do tell mum (my favourite is item 5)! :smile:

Good luck!


#7

Good read, thank you for the suggestion. I am now playing the grid garden learning game they linked at the bottom :smiley:


#8

No this would be a separate solution.