Card positioning inside a grid container, we want the price and buttons to be the same for each card

https://github.com/callum-laing/shopping-site/tree/main/app As you can see in the image, the button kinda floats around in each card, I want it at the very bottom of each card so it looks aligned as you scan across, instead of how it is now where it looks wavey and clunky.. I'm fine with the item description sitting below the image, and I'm fine with the price going wherever, as long as it's like the button, where it's aligned across the cards.
GitHub
shopping-site/app at main · callum-laing/shopping-site
Created in NextJS/React. Contribute to callum-laing/shopping-site development by creating an account on GitHub.
No description
37 Replies
ἔρως
ἔρως8mo ago
can you show what you intend to have, with either paint or excalidraw?
Choo♚𝕂𝕚𝕟𝕘
https://codepen.io/chooking/pen/dyLJXJB Making the card flex boxes solves both this and your previous question. You can use margin-top for the spacing if the container is flex.
ἔρως
ἔρως8mo ago
no no, i want the final look
ἔρως
ἔρως8mo ago
what you have there has a flaw: padding breaks it slightly
No description
ἔρως
ἔρως8mo ago
that's why i want a sketch of the final intention the final intention may be to have the padding take absolutely no influence on the button but, it may be what you have too both are a button at full width
Choo♚𝕂𝕚𝕟𝕘
I'm not the OP. I was offering a solution. How did you add padding that broke it? I added padding after seeing your comment and it did not break. Did you add padding only to the button?
ἔρως
ἔρως8mo ago
no, i added to the parent it's possible to "fake" it with margin on the image, but it will cause weird issues (specifically with backgrounds)
Choo♚𝕂𝕚𝕟𝕘
I see. You added padding only to the last card. While there are some use cases for that, I was expecting all cards to get equal treatment.
ἔρως
ἔρως8mo ago
i only added to the last card to show what's happening the button is no longer taking the entire width
Choo♚𝕂𝕚𝕟𝕘
OK. I did not realize that was what you wanted to demonstrate.
ἔρως
ἔρως8mo ago
it's fine
ἔρως
ἔρως8mo ago
which one is the intended version?
No description
ἔρως
ἔρως8mo ago
the html on v1 and v2 can be exactly the same, but the html on v3 would ideally be changed
CDL
CDL8mo ago
someone elses example but this is basically what im after, alignment wise, i mean
No description
CDL
CDL8mo ago
though the text like I said can sit below the image, i just want teh buttons to stick to the bottom
ἔρως
ἔρως8mo ago
so, v1 then? for the + and - thingy, you can use an inline grid
CDL
CDL8mo ago
not bothered about the + - i have that on the cart page sorry let me read the convo here haha 😄
ἔρως
ἔρως8mo ago
so, what's bothering you? currently, what you have is v2
CDL
CDL8mo ago
well... kinda.. the buttons position seems to vary per card atm
ἔρως
ἔρως8mo ago
im more worried about the position of the button and how you want it to react to padding
CDL
CDL8mo ago
again, this is someone else's design, but this is what I'm going for here . I'd look at their code but it's some wierd combination of css in html.
No description
ἔρως
ἔρως8mo ago
then what he sent it perfectly fine
CDL
CDL8mo ago
the margin-top: auto didnt seem to do anything for mine
Choo♚𝕂𝕚𝕟𝕘
It only works if the card is flex.
ἔρως
ἔρως8mo ago
the whole solution, not just bits
CDL
CDL8mo ago
No description
Choo♚𝕂𝕚𝕟𝕘
It doesn't show you using margin-top on the button. Also, I haven't seen the HTML. If there is a wrapper around the button, the margin has to go on the wrapper instead of the button and/or a different solution might be needed.
CDL
CDL8mo ago
oh right sorry, the HTML is
No description
CDL
CDL8mo ago
so yeah ,there's a few wrappers in general there
Choo♚𝕂𝕚𝕟𝕘
The problem is that the button is inside of another container.
CDL
CDL8mo ago
ohhh hold on adding it here seems to have worked
.infoContainer {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: start;
gap: 8px;
margin-top: auto;
}
.infoContainer {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: start;
gap: 8px;
margin-top: auto;
}
CDL
CDL8mo ago
No description
ἔρως
ἔρως8mo ago
nice
CDL
CDL8mo ago
If you don't mid me asking, how has margin-top: auto; fixed that lol (huge thanks, btw)
Choo♚𝕂𝕚𝕟𝕘
Automatic margin takes the full available space. It's more commonly used for centering. The way centering happens is both sides get the maximum available space.
CDL
CDL8mo ago
Gotcha. Well that's awesome, thanks a bunch 🙂
Want results from more Discord servers?
Add your server