Four Card Feature Section using HTML/CSS - Flexbox/Grid

Community feedback

• 

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted about 4 years ago

  Hey Josh, another great job! No responsive issues and great eye for detail. Just a few thoughts :

  • I think you could've gotten away with using flex for desktop using transform: translateY() for the two side divs.
  • For an exact duplicate in sizings and box shadows, Robert is right - you would need access to the Sketch file. But I think if you download the Chrome extension PerfectPixel, it will help ease some of the guesswork by having an overlay of the design onto your project.
  • Would've liked to see your name on the attribution link :-)

  3

  ---

  

  Josh Prentice•235

  @jfprenticePosted about 4 years ago

  @emestabillo Thanks for the advice! I'll definitely go back and try out the transform: translateY(). I'm going to look into getting a Pro subscription to get the sketch files - I'll download that extension in the meantime. Ahhh, I can't believe I overlooked the attribution! I was so concerned with getting the layout right haha thank you for taking the time to look at my work again! I really appreciate it!!

  1
• 

  P

  Robert McGovern•1,075

  @tarasisPosted about 4 years ago

  👋 Josh

  Well done! Looks good, and I like your 2x2 transition between the mobile & desktop versions. Although its only there for roughly 210px (1228px to 1440px). I'd love to see it going lower, before then swapping to the desktop version. It took me to swap to responsive mode to see the desktop version (my screen is 1366x768).

  For this I tried using only flexbox, but I couldn't get the diamond card layout to work.

  I did this challenge recently using just flex. Set up 3 columns, 1st and 3rd with auto margins for top and bottom to center the card and create the diamond effect.

  I don't really think there is an issue using both flex and grid. It did the job, so 👍 CAVEAT: I am still learning, so take that with a pinch of salt.

  Box shadow is a bit strong. Quite honestly I couldn't get it right.

  box-shadow: 1px 1px 25px -3px hsl(200, 12%, 60%); is closer but its not right either (I haven't looked at the sketch file yet).

  Don't forget to set the background color in body: background-color: hsl(0, 0%, 98%);

  2

  ---

  

  Josh Prentice•235

  @jfprenticePosted about 4 years ago

  Thanks! I went ahead and tweaked the breakpoints. I definitely still need more practice with media queries. Designing mobile first is really helping me with that. Good to know that I could have just used flex, though I am glad I got to practice using grid, I tend to use flex more often than not. Thank for the feedback!

  1
• 

  Favourite Jome•1,110

  @jomefavouritePosted about 4 years ago

  Is it common to use both flexbox and grid? Is it bad practice to change a section's display after a certain breakpoint?

  Yes it common to use flexbox and grid at the same time. No it isn't a bad practice to change a section's display. You're work was nicely done 👍

  2

  ---

  

  Josh Prentice•235

  @jfprenticePosted about 4 years ago

  @jomefavourite That's good to know! I'm trying to avoid making bad coding habits.

  Thanks for taking the time to check out my work!

  0

  

  Favourite Jome•1,110

  @jomefavouritePosted about 4 years ago

  No problem @jfprentice

  0