[solved] Spacing btwn btns isn't equal when screen gets thin

[solved] Spacing btwn btns isn't equal when screen gets thin
0.0 0

#1

If you click and the code side of my CodePen and drag it to the right the project screen gets thinner, ok.
-but I noticed that after a certain point the space between the buttons aren’t the same for each button. Wierd?
-I mean look, spr small thing but I just noticed it and thought myb I was using…

width: 60%;

…on CSS line 22 wrong.

wadya guys think?


#2

Could we have a link to your code?


#3

Oh yea lol.
https://codepen.io/AmericanPi/pen/KyzYwr


#4

It’s not looking evenly spaced because the buttons are different sizes. I think that it’s spacing based on the center of the buttons, not the edges. One solution is to make the buttons a uniform widths:

button {
  width: 150px;
}

in your CSS.

There are flexbox ways to get the spacing even without changing the size, but I think the buttons look better with uniform width.

And … uhhh … while I’m hear, I might advise going easy on things like animations. When their just in there gratuitously, it can look a little amateurish. I know it’s exciting to do these things, but hiring managers get tired of having that stuff rammed down their throat from every bootcamp grad. Less is more. You should be wary of adding anything like that unless it has a very specific and necessary purpose. Just my $.02.


#5

Yea using uniform widths makes sense. I don’t really see that they’re different sizes though so I better go back and check that.

hahaha no worries man, you can always add you 2cents as far as I go. But let me explain lol, I was only trying to get my jQuery working and those were the only functions(calls?) I had on the top off my head. I know it looks super lesson one and I’ll take it off now that I have the weekend away from work.
tx for the help @ksjazzguitar