Project product landing page - problem with flexbox

HTML-CSS
1

Hi, I am tryig to complete the responsive web design course, and in this project I am having a lot of trouble with the css flexbox. I want to have 3 rows and 2 columns: in the first column will be a image and in the second some information in a ‘p’ element. there will be 3 rows because I need to put 3 images and descriptions in my page. The problem is that the images are not working as intended: they are using their full width and height, while in the css I have written “width: 30%”. Do you know how to solve this? Here is the project:

P. S.: Sorry for my bad English

2

I think you should use grid

https://gridbyexample.com/examples/

3

If I understand where you want this applied it does not appear to me that the parent element or the children have the necessary flex styles.

This site has a good quick visual guide to flexbox.

If in doubt make a small test page of just the picture and the text to test out the behavior.

4

Hey there vader1138. After a brief scan of your project, I didn’t see any width declarations of 30% in your codebase. As far as the flexbox layout goes. Do you want the columns to be nested inside of the rows?

5

Maybe using “max-width: 30%” could fix it. I think CSS grid layout is a better option than flexbox.

HTML

<!DOCTYPE html>
<body>
   <div class="column">

       <div class="row">
           <img src="..." />
           <p> ... </p>
       </div>

       <div class="row">
           <img src="..." />
           <p> ... </p>
       </div>

       <div class="row">
           <img src="..." />
           <p> ... </p>
       </div>

   </div>
</body>

CSS

.column {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    width: 600px;
}

.row img {
    max-width: 30%; // ~180px
}
6

Thanks guys. I deleted the code before I recieved the messages, but it still looks good without having that layout with flexboxes

1 Like