ClassicPress / Directory

ClassicPress Directory for plugins, themes, and code snippets powered by ClassicPress.
https://directory.classicpress.net
Other
4 stars 3 forks source link

alignment for software grid so it doesn't look weird #27

Closed ghost closed 1 year ago

ghost commented 1 year ago

This should help with the alignments for the cards. Fix #25

viktorix commented 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:

image

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?

ghost commented 1 year ago

I can't tell if you have all the same height from the picture!

ghost commented 1 year ago

did you try my solution, it works better from what I can tell.

ghost commented 1 year ago

Screenshot 2022-11-30 at 9 26 59 PM 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.

ghost commented 1 year ago
.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.

ghost commented 1 year ago

Screenshot 2022-11-30 at 9 34 16 PM

ghost commented 1 year ago

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.. Screenshot 2022-11-30 at 10 14 27 PM

@xxsimoxx what do you think to the best and simple approach.

ghost commented 1 year ago

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;
}

Screenshot 2022-11-30 at 10 37 07 PM

xxsimoxx commented 1 year ago

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.

image

viktorix commented 1 year ago

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

ghost commented 1 year ago

do i need to make any changes on my side for this ticket. is the solution i have okay enough!

ghost commented 1 year ago

@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.

xxsimoxx commented 1 year ago

Now it looks good! For me it's OK!