I am coding out a test layout but I am stuck. I have a thumbnail and then content wrapped in their own divs but the div for thumbnails is massive. I have tried shrink and grow in flexbox but I am lost:
That is my fiddle - can someone point me in the right direction?
How do you want it to be laid out?
So that you have the
1st article with the image left and content right
2, article content left and image on the right
This is done but the image doesn’t need to take up all the space
So how exactly do you want the other content, besides the image, to be arranged?
Edit: Basically, right now your
.post-body container has two child elements:
.post-body is a flex container, it is dividing the container for those children. So the thumbnail isn’t big, it’s just being allocated the same height as the tallest sibling element, `.post-content’. There are various ways to fix this, but it depends on how you want the content to be displayed.
Thanks for your awesome help. I have just figured it out with reading this doc:
Which I have read before just needed a lightnbulb to click
Here is a short video of what I was trying to achieve:
Thank you again for your help, it is what makes FreeCodeCamp the awesome place it is
Also updated this too:
For you to look at