Hi everyone,
I am having trouble making the select button on each of the item-cards stick to the bottom of the page, there is one card that is different than the others when view in desktop view. My question is how do I make the select button about 15px from the bottom of the li element. And if there are anything else I can improve in the site please let me know.
https://codepen.io/vincentqdo/full/YmxxEY
I appreciate all the help and feedback. Thank you.
Volcano has longer content that’s why. It’s normal.
#items-container display:flex; is sizing all cards to the tallest which is volcano. I think if it weren’t a flex container it would be possible to fix the button 15px from the bottom.
You can try using p tag instead of span and changing the relative height for an absolute size. This way every single .item-description will have the same size. I hope this helps! Your project looks really cool.
@tlc35us 's solution looks more professional, though.
Good idea! Set the height of the p to the tallest one then everything is the same.
@tlc35us Thank you for your feedback! I tried to make it a different display mode other than flex but I can’t figure out how to make it wrap around or center it as neatly as flex.
@drowvoloper Thank you for your feedback! I really like your idea. I made the <span> into <p> and was able to made it into a fixed size
Your right it gets ugly especially in a list. You have to use more media queries and make sure that your cards are fifty percent width to insure a 2-2 layout and avoid wrapping to a 3-1layout. Fortunately I have only had to deal with it in menus.