Make images in grid responsive
Hello Toddle Jeddis I 'm struggling with front -end display of images 🖼️ See my 2 images attached . 1st problem : When I resize the screen I want the image to be able to shrink (up to a certain point ) to continue displaying my 2 columns (images ) . In mobile , I should have 1 column (image ) stretched wide , and then if I increase the screen size , I should get 2 images that appear shrinked to their min size . 2nd Problem : I want to have a set height on my image , WITHOUT making the image disproportionated . How would you , Jedi of toddle , go about those 2 problems , sticking to native toddle as much as you could ? Thanks a lot : get similar AI generated images on selfiebooth .ai I guess i have my answer here https://www.youtube.com/watch?v=bvuQxnoWQP4✅ Flexbox is great , but for such a layout , maybe grid will suit your needs better . Two blogposts are fine , but when a third one joins , it gets stretched out and spans the full container width . Grid is not supported in Toddle yet . Maybe this custom CSS will help you : Wrapper <div > width: 100% display: grid gap: 1rem grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) Change the 300px in any value you like . https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns Inside of this wrapper grid div , you can repeat your cards . And for the image or img -wrapper inside of the cards : aspect-ratio: 1/1 https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
