Submitted over 1 year ago

Expenses chart component

Jurdel Gallano•380

@secretcrew2

Preview site View code

This is a solution for...Expenses chart component

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

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,560
@0xabdulkhaliqPosted 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!
0
Jurdel Gallano•380
@secretcrew2Posted 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.
0

Please log in to post a comment

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