Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive expenses chart component solution

#accessibility#semantic-ui
ROCKY BARUA 1,090

@Drougnov

Desktop design screenshot for the Expenses chart component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


No media queries

Pretty fun challenge. First time working with JSON files in vanilla JS. Did something upgrade on my own:

  • Added preloader
  • Added custom logo with animation
  • Highlight every day's bar

Please leave some feedback. Thank you😊

Community feedback

@Ayodelearog

Posted

Hi, I don't have any feedback to give on this project, but I'd like to ask a question concerning how to make my site display properly on mobile. The bottom of the site gets squished on mobile.

0

ROCKY BARUA 1,090

@Drougnov

Posted

Hi @Ayodelearog, if your site content is getting longer than the screen height, use min-height: 100vh. It will let your content grow longer to the bottom. It will make the site scrollable if it extends 100 view height.

Let me know if this solves your problem or remained the same. Have a good day :)

0

@Ayodelearog

Posted

@Drougnov Thank you for the response. I had already consulted some other developer and he told me that since the parent container of my component already had a specified height, I didn't need to include the height property to my component. This fixed my issue. Thank you again. By the way, I love your work, I'd like to follow you everywhere.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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