Four-card feature section. Mobile first

Community feedback

• 

  Anna Leigh•5,135

  @brasspetalsPosted about 4 years ago

  Great job! 👍 Glad to hear you like mobile-first. I was hesitant to try it, but agree that it’s so much easier, and I find it makes for smoother transitions between layouts.

  Just a few suggestions:

  • I’d bump your media query up to around 1150px or so to prevent side scrolling and cramping.

  • You might also want to play around using width percentages in combination with a max-width value on cards and headings (or in your next project) to create a little more responsiveness.

  2

  ---

  

  Artem Ponomarenko•365

  @ArtemPonomarenkoPosted about 4 years ago

  @brasspetals

  %'s one of those things that I struggle with. I am slowly getting there. I started to use rem more already, so getting there... Thanks!

  1
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  Hey, Artem Ponomarenko! 👋

  Nice work, once again! Your solution looks great! 👍

  I only suggest,

  • Perhaps using the article elements for the feature cards would make your HTML a little more semantic. Just a tip!

  Keep coding (and happy coding, too)! 😁

  1

  ---

  

  Artem Ponomarenko•365

  @ArtemPonomarenkoPosted about 4 years ago

  @ApplePieGiraffe

  On my TODO for some time now =) need to finally make it happen =) Cheers

  0

  

  Artem Ponomarenko•365

  @ArtemPonomarenkoPosted about 4 years ago

  @ApplePieGiraffe

  One additional question if you don't mind =)

  I did my solution according to the sketch design and aligned it with "Pixel-Perfect" extension (positioned x: 0, y: 0, scale: 1). And everything got aligned perfectly. But somehow it seems like I have slightly more "padding-top" on the DESIGN COMPARISON ⬆️ . Where is that coming from? I checked some yours designs, and you don't seem to have it. What do I miss? Thanks! 🙏

  0

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @ArtemPonomarenko

  Hmmm... I haven't actually worked with the Sketch files before, so I couldn't say for sure what might be causing that extra space at the top of your page. 😊

  If everything looks aligned with the Pixel Perfect extension, then I suppose it must be an issue with the way the screenshot for the design comparison is taken.

  I have a feeling the screenshots are taken in Firefox, but I checked your design there and it looks fine, too. 🤨

  I usually just have one tab open with my solution and one tab with the design image and make sure both tabs are set to the same size so that I can compare my solution to the design (the Pixel Perfect extension is nice, but sometimes the opacity trips me up a little). 😀

  Perhaps you could try generating a new screenshot by hitting the "Generate New Screenshot" button or go back and decrease the padding in your solution by a rem or two and then generate a screenshot again!

  1