I am trying to create a section that have 3 equal columns/cards. I run into a trouble when I tries to make it works on smaller screen sizes. Each card should wrap on to a new line when the screen size gets smaller than 250px.
The problem could be seen in picture 1:
I set flex-wrap: wrap; for the flex container and flex: 1 250px; for the flex children but they do not seem to work, so I am confused what I have done wrong.
I also want the distance of my paragraph and the titles in the cards to be equal. I have .project with display: flex and have .project p {margin-top: auto} following a guide on creating equal height cards, but it also does not seem to work.
/*PROJECTS*/.projects { margin: 0 12rem;}/*CONTAINERS FOR IMAGES*/.project-image { width: 250px; height: 250px;}/*CONTAINER */.projects-list { display: flex; flex-direction: row; gap: 1rem; flex-wrap: wrap;}/*ITEMS IN THE CONTAINER*/.project { display: flex; flex-direction: column; flex: 1 250px;}.project p { margin-top: auto;}.project img { width: 100%; height: 100%; object-fit: cover;}<div class="projects"><h2>Projects</h2><div class="projects-list"><div class="project"><div class="project-image"><img class="library-chatsphere" src="https://via.placeholder.com/300" alt="the poster of the NCHU library chatsphere 2024"></div><h3 class="projects-title">Lorem ipsum dolor sit amet.</h3><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam omnis quibusdam animi. Voluptatibus nobis quo reprehenderit ipsam id quaerat pariatur.</p></div><div class="project"><div class="project-image"><img src="https://via.placeholder.com/300" alt="a background of green leaves"></div><h3 class="projects-title">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit vitae illum quod quisquam provident odit praesentium assumenda quae ipsum sed.</p></div><div class="project"><div class="project-image"><img src="https://via.placeholder.com/300" alt="a background of green leaves"></div><h3 class="projects-title">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit vitae illum quod quisquam provident odit praesentium assumenda quae ipsum sed.</p></div></div>