@ApplePieGiraffe
Posted
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
640pxand1200px, 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)! 😁
@brasspetals
Posted
@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!
@ApplePieGiraffe
Posted
@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!
👍
@brasspetals
Posted
@ApplePieGiraffe Glad to hear I'm not the only one! 🤦♀️😂 Live and learn. At least it won't happen again!
