Frontend Mentor | Expenses chart component coding challenge solution

Solution retrospective

This is the first time I've encountered a different result when applying CSS styles in the developer's tools compared to using a style tag. When I apply margin: 0 auto or align-items: center, the div's width does not match max-width: 28rem. However, when I apply these CSS rules in the developer's tools, it outputs the desired result. I'm not sure why this occurs, but I hope to receive some feedback on why it happens

Community feedback

Abdul Khaliq 🚀• 72,660

@0xabdulkhaliq

Posted over 1 year ago

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

You have done everything right, but you have forgetten to add margin.

Without adding margin to the div then using max-width will serve no purpose

So you just wanna add margin of 2rem for the first div within the main

The mx-8 utility class can be used to add margin of 2rem for both left and right sides

You can take a look at this solution for another challenge where i used this method properly

I think now you can understand the combination of margin and max-width will results in responsive design

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Jurdel Gallano• 380

@secretcrew2

Posted over 1 year ago

@0xAbdulKhalid thank you for the feedback. I did try adding the margin of the first div but still nothing happen. the max-width of the first div is 21rem even though i set it to 28rem.

Expenses chart component

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community