why these cards in flex seem to be not in the same height
idk if you can spot it but here the second element looks a bit big
https://pastecord.com/otanylyjaw.html
here's the html & here's the css
https://pastecord.com/unahumocyn.css
18 Replies
the image is what seems to be pushing it
i should have something like
set aspect-ratio and object-fit:cover; on the images so each image takes the same size
wp does that on the get go
Hmm stange... From what i can see they do not seem to have same aspect-ratio. maybe the cards have different widths and that would explain why in this case
@Dev_HK Try remove the height and width attributes
it can mess things up as seen here
can i share with you the source code (idk if the codepen does have imgs assets or some)
else we can hop on a call if you care
start off by trying to remove the height/width attributes, if that does not work, you can share the code via codepen, the images can be upload to an imagehost such as imgbb and then you can replace the links to the images.
Otherwise you can upload the website to a free webhost such as w3spaces, github pages, netlify or whatever
Or aah forgot its wordpress
yeah
so it should be public already
not this version i'm working on
there's the hosted site
Ah alright
lemme share the codepen then
otherwise you can upload the site to a free host that supports php such as http://hyperphp.com/
the codepen shows it perfectly, probably some injected css
aspect-ratio doesnt work if you have both a width and the height for the image, and from what i can see, you have the height/width attributes, and not only that, but you also have height:inherit; to inherit height from the parent
But yeah this is one of the reasons i never really use finished CMS websites such as wordpress. i always make my own because the way they have made it is just so bad and there are just so much problems
bunch of injected classes to be fair, i guess it's because of history (there wasn't any flex nor grid back then)
yeah