Skip to content
Submitted over 1 year ago

Summary Component Using jQuery for JSON File

Rebecca Copeland•50
@rebcop
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What's the best way to wrap elements just for styling purposes? I just used div and span elements mainly.

For adjusting the different screen sizes, I used media query. Are there alternate ways to achieve this? What's the most commonly used solution to accommodate different screen sizes?

Community feedback

  • Manish Patel•730
    @savvystriderPosted over 1 year ago

    Your solution looks great!

    <div> elements are useful as containers because they are block-level by default.

    As for adjusting for different screen sizes:

    • use percentages for width/height, if you have to set them at all.
    • use em units for things like padding/margin, and rem units for font size.
    • using a grid layout can cut down on the amount of media queries you have to use
    • start mobile first (using min width media queries) and build up from there.
    Marked as helpful
    1
    Rebecca Copeland•50
    @rebcopPosted over 1 year ago

    @savvystrider thank you so much for your feedback! I really appreciate it!

    1

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