Kevin Powell - Community•3w ago

Button Align Problem

Hey, do you have any tips on how to better align the button? Right now, it's not lining up properly with the gap between the images. -btw i am using Tailwind https://codepen.io/Redcaus12345/pen/ByyMqLE

jog

CodePen

Untitled

...

8 Replies

redcaus1235OP•3w ago

i dont know why tailwind css not working in codepen

Chris Bolson•3w ago

Codepen doesn’t include Tailwind by default, you need to add it yourself.

redcaus1235OP•3w ago

I couldn’t still fix it

aaron•3w ago

Is it possible for you to use CodeSandbox, I think it is easier if you need JS/CSS framework.

aaron•3w ago

Chris Bolson•3w ago

What is the issue? I added Tailwind to your codepen and the buttons looked correctly aligned as far as I could tell.

redcaus1235OP•3w ago

but not with the cards

Chris Bolson•3w ago

OK, I see what you are reffering to. The very nature of flex means that the "columns" are flexible and defined by the width (content) of the children, not the parent. In this case your right-hand button is wider than the left-hand one so that it is pushing it to the left. Can you give your buttons a fixed or min width? min-w-48 would be enough to fix it in this specific case. Alternativley (this is what I would probably do), you could use grid (for both containers) as that would be easier to control. As I say, this would probably be better suited to grid, something like this should work:

<div class="grid grid-cols-2 gap-5 mb-8 max-w-4xl mx-auto">
 ... buttons
</div>
<div class="grid md:grid-cols-2 gap-9 max-w-4xl mx-auto pr-0">
...cards/images
</div>

<div class="grid grid-cols-2 gap-5 mb-8 max-w-4xl mx-auto">
 ... buttons
</div>
<div class="grid md:grid-cols-2 gap-9 max-w-4xl mx-auto pr-0">
...cards/images
</div>

Gaming

Programming

Button Align Problem

Did you find this page helpful?