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
ἔρως18d ago
can you show what you intend to have, with either paint or excalidraw?
C
ChooKing18d ago
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.
ἔρως18d ago
no no, i want the final look
ἔρως18d ago
what you have there has a flaw: padding breaks it slightly
No description
ἔρως18d 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
C
ChooKing18d ago
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?
ἔρως18d 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)
C
ChooKing18d ago
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.
ἔρως18d ago
i only added to the last card to show what's happening the button is no longer taking the entire width
C
ChooKing18d ago
OK. I did not realize that was what you wanted to demonstrate.
ἔρως18d ago
it's fine
ἔρως18d ago
which one is the intended version?
No description
ἔρως18d ago
the html on v1 and v2 can be exactly the same, but the html on v3 would ideally be changed
C
CDL18d ago
someone elses example but this is basically what im after, alignment wise, i mean
No description
C
CDL18d ago
though the text like I said can sit below the image, i just want teh buttons to stick to the bottom
ἔρως18d ago
so, v1 then? for the + and - thingy, you can use an inline grid
C
CDL18d ago
not bothered about the + - i have that on the cart page sorry let me read the convo here haha 😄
ἔρως18d ago
so, what's bothering you? currently, what you have is v2
C
CDL18d ago
well... kinda.. the buttons position seems to vary per card atm
ἔρως18d ago
im more worried about the position of the button and how you want it to react to padding
C
CDL18d 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
ἔρως18d ago
then what he sent it perfectly fine
C
CDL18d ago
the margin-top: auto didnt seem to do anything for mine
C
ChooKing18d ago
It only works if the card is flex.
ἔρως18d ago
the whole solution, not just bits
C
CDL18d ago
No description
C
ChooKing18d ago
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.
C
CDL18d ago
oh right sorry, the HTML is
No description
C
CDL18d ago
so yeah ,there's a few wrappers in general there
C
ChooKing18d ago
The problem is that the button is inside of another container.
C
CDL18d 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;
}
C
CDL18d ago
No description
ἔρως18d ago
nice
C
CDL18d ago
If you don't mid me asking, how has margin-top: auto; fixed that lol (huge thanks, btw)
C
ChooKing18d ago
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.
C
CDL18d ago
Gotcha. Well that's awesome, thanks a bunch 🙂
Want results from more Discord servers?
Add your server
More Posts
Trying to align every card so that the button?in before someone mentions the unfinished title. https://github.com/callum-laing/shopping-site/treeTailwind helpI use Tailwind and would like to display the 2 Li elements next to each other with a small distance What's a modern simple logical layout I can use for the main logo?I'm working on a website for my dads business and I just want to keep it really clean and modern. ThHelp with side navigation/sidebarI’m new to JavaScript and I’ve been working on personal projects trying to improve my skills. Couldbackground scrolling when menu is openHello, does anybody know, how to stop background scrolling when you open side menu? I've tried overfescaping the wrapperHey, is there a way to escape a wrapper on one side without using grid? I'm aware Kevin has made a vSome serious problems with my CSSSo, I have started building a site and I have got as far as the navigation, when I made it a few dayScroll Shadow in CSSWhen I scroll the white shadow is coming from below. How to make this with CSS. https://www.harpersOverflow-y: auto makes x-axis scrollbar appearHi folks, I have a react Sidebar component with scss styles. The sidebar has the main list 'sidebar_minFn confusionCodePen: https://codepen.io/Ceecee-Hart/pen/dyLZrKb I'm not sure where this extra space is coming fTriggering an animation based on scroll positionHi I want to recreate the marquee effect on scroll. https://afundi.im/ Any tips?Need help with a background img?How would I get the background pattern in the card to be behind avatar. I tried using position absolFull-Stack web developer is open for workHi, Everyone Full-Stack web developer is open for work. If you are looking for any **web/blockchain "space-between" with gridHey, is there a way to define the `space-between` value utilized with flex for grid? I tend to use thelp about this flex box bighelloi need help make this part of jshttps://www.coloniaverdenyc.com/menus in this website how can i use this java script thing switch mWhy margin right isn't working as expected?I was experimenting with negative margins and came across something that I don't quite understand. azimuth degrees into Cardinal PointSo I am trying to find out if there is a json file somewhere that would have the degrees and allow mHovering issuesWhen I hover on "register", my screen jumps. What cause it? https://codepen.io/Jonah-the-lessful/pFix background for div on hoverHey guys, You can see in screenshot when I hover on a card the background is getting disturbed. I ne