Fylo Dark Landing Page - Flexbox, Mobile-First

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  Wow, Anna! 😍

  Amazing, pixel-perfect work! Your attention to detail is great!

  I like the hover effects you added to the icons beside the information in the footer of the page.

  I suggest,

  • Between 640px and 1200px, the font-size of most of the text on the page becomes very, very large (about twice as large as the regular mobile and desktop layouts). Decreasing that font-size would be a good idea, I think.

  I suggest you try using CSS grid for the desktop (and mobile) layout of the features section. It's very easy to set up a few columns and rows, determine which content should be placed in each grid cell, specify a grid-gap between the grid cells, and make your grid layout responsive without any media queries! Tweaking your grid to match that of the design should be no problem, either. 😉

  As for those minor accessibility issues, you should be able to get rid of them by adding a <title> element to each of your inline SVGs.

  Wonderful work! 🙌

  As usual, keep coding (and happy coding, too)! 😁

  1

  ---

  

  Anna Leigh•5,135

  @brasspetalsPosted about 4 years ago

  @ApplePieGiraffe So funny story - when I first started coding this, I noticed the mobile design file was 750px wide, so that's what I went for - not realizing until I was nearly done with the entire thing that 750px is double 375px, the typical mobile layout design size for these challenges. A ridiculous mistake. I was so upset with myself for not realizing something so obvious sooner. Hence the "tablet" layout is essentially double that of the mobile layout. 😅😂 But you're aboslutely right, it does look pretty goofy when you're resizing between the mobile and desktop versions (although great if you have bad eyesight!). I will go back and re-do the medium styles (if i'm lucky, I can just take everything down by 25% or so).

  I definitely need to start using grid more. I think here I was just a bit apprehensive of mixing grid and flexbox, although I know you're typically fine as long as grid isn't nested inside a flex container (or so I believe).

  Thank you for the tip about the accessibility issues! I wasn't sure what to do with the link errors. I added the titles and generated a new report - all fixed! 🙏

  And thank you, as always, for taking the time to look through everything and leave such great feedback! I really appreciate it. 😊

  Edit: Went through and revamped the tablet/medium styles. Thank you again for the suggestion. I really didn't want to have to go back and change it all, but knew you were right and am glad I did!

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @brasspetals

  Glad to help and to hear you were able to add those improvements to your solution! 😄

  I actually did that same thing you did when completing a challenge just a week or two ago! It is kind of frustrating to realize your pixel-perfect solution is only pixel-perfect for a completely wrong set of dimensions, but it happens, I guess, and we simply need to bounce back!

  👍

  1

  

  Anna Leigh•5,135

  @brasspetalsPosted about 4 years ago

  @ApplePieGiraffe Glad to hear I'm not the only one! 🤦‍♀️😂 Live and learn. At least it won't happen again!

  1