@mkboris
Posted
Hi rohantayal
To get the required outcome, you'll need to to use the JSON data provided to dynamically change the ui based on the selected timeframe, there are some great resource in the JavaScript fundamentals Learning Path to guide you.
Also, some suggestions that might be of interest to you,
- Font-size should be written in rem not px. This article explains it better Why font-size must NEVER be in pixels.
- Avoid setting fixed heights and widths on elements as this will cause lots of issues with the responsiveness of your layout, the element's content and using padding should determine it's size. Use max-width or min-height if you absolutely have to and the units should be relative units like rem.
- Media queries should be defined in rem or em not px.
Hope this helps.
Marked as helpful
@rohantayal
Posted
Hi @mkboris
Thank you so much for the useful tips. I have used the JSON data to dynamically change the UI based on the selected timeframe.
For the second suggestion of never using px. Does this also apply to margin and padding?
@mkboris
Posted
Yes, you should use rem almost all the time because it scales with the base font-size set in the browser. Use em when you want a component to scale with the font-size of the current element, a button's padding is a great use case for em. Only use px on something you don't want the size to ever change.
