online shopping cart preview page designed with flexbox

Community feedback

• 

  ekando•10

  @elliottkanPosted about 2 years ago

  Hey!

  Flexbox is definitely quite a tough beast to love! I like to think about breaking them down into small sized pieces for styling.

  1. I would add a max-width to the container to address the sizing issue instead of using margin.

  • You could also remove the div class container OR content since one of the divs are currently not doing anything, I would apply the background colour to the entire html element instead through *. By doing this, your .attribution should sit directly underneath your card.

  2. Play around with @media so the layout changes for responsive mobile design. You could then apply flex-direction: to address the change in layout.

  3. I believe it is best practice to use em as opposed to px for styling to cater for mobile first designs.

  4. Look at HTML semantics to understand better how to label your content, there are several h elements within your .wordings div. I believe the h4 could be replaced with <p> but I'm pretty new to this game still.

  5. could apply a width:100% to your img so it fits within container.

  I would recommend Kevin Powell to get some better understanding with CSS, he's an absolute weapon

  Hope this helps!

  0

  ---

  

  Mojisolasmiles•20

  @MojisolasmilesPosted about 2 years ago

  @elliottkan Thank you so much, corrections will be made…I am also a beginner 😊

  0