Responsive page using CSS Flex Box

Community feedback

• 

  Shivam•520

  @shivjoshi1996Posted over 4 years ago

  Hey there! Looks like you have a lot of repeating code for the cards. Instead of putting the same code inside each of the different card classes, you could just put it into the main card class. I'm still learning, but take a look at mine for an example: https://www.frontendmentor.io/solutions/mobilefirst-four-column-layout-using-flexbox-U8HTJvnK8

  This'll make your code more re-usable and easier to change :)

  I'd also try to centre the text and the cards. You can use text-align: centre for the text at the top. For the cards, take a look at how to centre using flexbox.

  0

  ---

  

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 4 years ago

  @shivjoshi1996 Which code do you think is repeated? His design was probably based on what how he wanted it to appear on various screens.

  0

  

  Shivam•520

  @shivjoshi1996Posted over 4 years ago

  @ChamuMutezva ah yes, taking a closer look I can see some differences. There are a few repeated lines in each card, such as the following:

  display: flex; flex-direction: column; background-color: #ffffff; border-top: 5px solid hsl(180, 62%, 55%); box-shadow: 5px 5px 8px hsl(229, 6%, 66%); border-radius: 5px;

  The flex lines may need to be within each card itself, but the others could potentially be added to a "card" element. Let me know if that makes sense, I'm also starting out so any feedback on my feedback is welcome :)

  0

  

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 4 years ago

  @shivjoshi1996, OK - you are referring to the css file classes. That's a good catch there. Indeed the repetition can be avoided on that point.

  1

  

  Eric Akoten•175

  @AceKahunaPosted over 4 years ago

  @shivjoshi1996 Thanks for the tip, indeed the repetition was too much and time-wasting, through your code I've noted how I can improve later it.

  1