Design comparison
Solution retrospective
Enjoyed this one! Starting to get the hang of using grid and flexbox, whilst also learning JavaScript. If anyone could help me with the following that would be appreciated:
I know the CSS is messy, is there a good way of simplifying this code? I know I have repeated a few things that I could easily simplify but any best practises would help me.
What are the best breaking points for media queries with a design like this?
I have used a lot of absolute font sizes and image sizes, is there a better way such as using Rem and Em?
I used grid and flexbox for mobile, I know I can just change the grid to span one column but it is very easy just to change it to flexbox for mobile, is this a bad practise?
How are the semantics with my HTML?
Community feedback
- @GenildocsPosted over 1 year ago
Hello, congratulations on completing the challenge!
One way to simplify your CSS code would be to use a preprocessor like SASS, which has tools such as mixins and variables to avoid code repetition.
Regarding breakpoints, I suggest using the developer tool to identify the points where the layout begins to break and make adjustments at those points.
Regarding font size, use the REM unit, which utilizes the font settings of the root element. In this element, try setting the font size in percentage, for example:
html{ font-size: 62.5%;}
In this configuration, the font size is set to 10 pixels, so the REM unit will be relative to this value, making it easier for you to use.
Regarding the grid, you wouldn't need to change to flex-box, you could have configured the grid on mobile devices to have only one column. I hope these suggestions have been helpful.
Marked as helpful0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord