Try to make the shadows softer like the design of you can.
And content is spilling off screen for me on mobile - I’ll add a screenshot on slack for you so you can see what I see
It would be very helpful for code reviewing if you included an unminified version of your css as well. I rarely have time to dig through separate sass files 😉
@Jeth0214
Posted
@grace-snow hello maam, I'd fixed the screen issue on mobile. The min-width: 100vw causes it, it is supposedly min-height : 100vh. I removed it. I also minified the css file. About the box shadow, It is quite challenging. hahaha. I try to lighten it as I can.
@Jeth0214 well done that looks much better 😁
Here are some other more general tips
- don’t use br in your heading. Set the part in the span to be display block instead. This is because screenreaders will announce the br
- when you add decorative images like those icons, leave the alt tag blank intentionally
- line height should really be unitless, not in rem, like 1.4. Not a big deal, as font sizes are also rem in this I think, but something to be aware of that’s not how it’s usually done
- when using scss I recommend against nesting (indentation with
&) partial class names. It makes it hard to read, can be easy to introduce bugs from small nesting mistakes, and later on big projects it gets difficult to debug css because you can’t find the whole class names. Best practice is to only use nesting for pseudo states, pseudo elements and media queries. Those are the items that “belong” to the class, so it makes a lot of sense to nest those. - for frontend mentor challenges include unminified code if you want feedback next time
I hope these tips are helpful
@Jeth0214
Posted
@grace-snow Noted maam, Thanks for the tips.
