Product Review Card Solution

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  Hello Alex, congratulations for your solution!

  I'll propose you a grid exercise to create this component the easiest as possible. The best way to build this component with two columns is by using GRID LAYOUT since it is simpler to manage the columns and then create the media query for mobile. Here’s the steps to create it with grid create the main block to hold all the content (you can use <main> to wrap), set its width as max-width: 900px (it's the container size) and display: grid / grid-template-column: 1fr 1fr(this means that your component will have two columns with 50% of the container width each thats 450px).

  Then to create the mobile version, all you need to do is to change the container flow vertically with grid-template-column: 1fr.

  Try this approach and you'll never want to use flex to create layouts, just to manage content.

  Hope this helps, happy coding 👍

  0

  ---

  

  Alex•120

  @Alexr6667Posted about 2 years ago

  @correlucas Hi Lucas,

  Very much appreciate your reply.

  I did try to use grid but I think I need to practice some more. I couldn't get the outcome that I was looking for. After spending a lot of time working on the grid approach, I decided to use flex in the end as I have a lot more experience using flex so decided to just go with this approach.

  I plan to try a few playgrounds and work on my grid work to become more comfortable with this.

  I will try your solution when I have some free time as I to feel like grid would have been a much better approach.

  1
• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Alex, congrats on finishing the challenge! almost got a pixel perfect!

  I tried to replicate your bug but its not happening to me, I added this structure:

  <section class='card'>
      <div class='container'>
          content
      </div>
  </section>
  

  And still works the same as with no container div, could you explain further or replicate the bug and upload it to github? Now curiosity is killing me about a flex getting column without specifying it!

  0

  ---

  

  Alex•120

  @Alexr6667Posted about 2 years ago

  @DavidMorgade Hi David,

  I think I worked it out. I think maybe I was putting the display: flex; on the card instead of the container which for some reason forces everything into a column. I guess this is because I was adding the css class to the parent of the parent and not the direct parent.

  Thank you very much for you reply and looking into it for me.

  1