Problem with blog post aspect ratio

Hey all, so I tried setting the image position to absolute after wrapping it in a div block for the image aspect. When I set the image position to absolute, it just disappears and I'm not sure why. https://preview.webflow.com/preview/mikos-marvelous-site?utm_medium=preview_link&utm_source=designer&utm_content=mikos-marvelous-site&preview=d780f92187e5fa6cb15c0aac5500f10e&workflow=preview
13 Replies
Web Bae
Web Bae2y ago
site is looking great!
Web Bae
Web Bae2y ago
No description
Web Bae
Web Bae2y ago
set width of '.blog-preview-card' to 100% and you should be good also don't forget to set the image fit to 'cover' to keep it from stretching you had the width and height set to Auto for '.blog-preview-card'
meeko.
meeko.OP2y ago
just wondering was the blog card being set to auto width omit the image because it it's only taking into account the text and label contents? and thank you so much for the help 😄
Web Bae
Web Bae2y ago
link deafult position in "inline-block" if you change to "block" block that would also fix it
Web Bae
Web Bae2y ago
Stack Overflow
CSS display: inline vs inline-block
In CSS, display can have values of inline and inline-block. Can anyone explain in detail the difference between inline and inline-block? I searched everywhere, the most detailed explanation tells me
Web Bae
Web Bae2y ago
or on the collection item you could set display to 'flex' and then 'stretch'
Web Bae
Web Bae2y ago
No description
Web Bae
Web Bae2y ago
basically I think because the link block is "inline-block" by default it wants to allow space to left and right for other content but in this case it didn't "know what to do" because the contained content had no width or height. image w/h set to 100% (of parent) image-height wrapper width set to 100% (of parent) parent of those is ''.blog-preview-card" which has width and height set to auto. In this case, auto doesn't really do anything because the children's w/h are expecting to get info from their parent. What happens is the parent collapses to 0x0 unless we tell it to by setting the width, changing the display, or giving the parent of THAT div a display of flex with stretch hope that helps - def a little bit confusing. I'm so happy to see you building out the site! I hope you're learning a lot. Can't wait to see it when you've finished This blog card design was a challenge because it's not great for accessibility since Webflow doesn't let us add nested CMS Collections inside of link blocks
meeko.
meeko.OP2y ago
ahhh gotcha! yea that makes more sense. i was a bit confused with some webflow components since some of them are a bit funky to work with I remember you mentioned coding in sliders using the embed element is a lot nicer to work with and was wondering where you'd recommend learning code
Web Bae
Web Bae2y ago
sometimes easier with code. sometimes easier in webflow... kinda depends lol I don't have a specific place I recommend to learn - have heard good things about code academy where are you based?
meeko.
meeko.OP2y ago
im based in chicago!
Web Bae
Web Bae2y ago
💯 I took a coding bootcamp that was game changing. If you have the desire to learn and the time I’d def recommend
Want results from more Discord servers?
Add your server