Closed ghost closed 1 year ago
In my screenshot example, the way I pushed download/more info all the way to the bottom is using flexbox. You can see it here:
The <footer>
does need display: none
set. It holds modal content so it's not visible but it does take up space at the bottom.
What do you think?
I can't tell if you have all the same height from the picture!
did you try my solution, it works better from what I can tell.
i tried this too, it still gives u some weird issues with the styles using flex. i would recommend my way.. the way you done it, is also fine, but when there's more text to it like the 3rd one Tag cloud, there's no margin on the bottom.
.software-grid .hentry p {
margin: 1em 0;
min-height: 8em;
}
wil work as expected, keep it simple and not overcomplicate with display flex. the min-height can be 6em if you wanna keep it closer at the bottom to the text.
I was just playing around again.. i came up with this same as your flex solution, but the problem if this one is how not so much text in the paragraph, the download and more info is push up..
@xxsimoxx what do you think to the best and simple approach.
try this
.software-grid .hentry p {
min-height: 4em - 8em ; // depending on how close you want to the content. but 6em is ideal...
.hentry {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%
margin: 0;
}
.software-item-meta {
padding: 1em;
margin: 0 -1em;
border-top: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: none;
display: flex;
justify-content: space-around;
}
I see already some items not aligned. In this screen (you see this if you are logged in and in your own plugins/themes) the missing bottom border can add more clarity but it's an optional.
Whatever option works best is fine by me. But, can you also add line-clamp and limit description to 3 lines please? This will make results more consistent. https://elad.medium.com/trimming-multi-lines-in-css-5ae59d5e6d84
do i need to make any changes on my side for this ticket. is the solution i have okay enough!
@xxsimoxx
I see already some items not aligned. so to solve this, i'll need to change the min-height to 8em so it aligns correctly with the
.software-grid .hentry p
give me a sec so i can make the change.
Now it looks good! For me it's OK!
This should help with the alignments for the cards. Fix #25