Skip to content
Submitted about 1 year ago

Vannila HTML and CSS

Vinicius Delfin•20
@vinicius-delfin
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

Okay, this one was harder than I thought. I encountered some difficulties when attempting to convert the mobile design to desktop. My initial plan was to use the 'float' property, but it didn't work. As a workaround, I ended up using 'position: relative' and 'position: absolute'. If anyone knows why this issue occurred, I would greatly appreciate any insights.

Community feedback

  • lrobb95•200
    @lrobb95Posted about 1 year ago

    Hello Vinicius,

    Awesome job on the project!

    The solution I can give you would require you to nest your #results card inside your #summary card and use display: flex; to get them next to each other. Then for the mobile media query, use flex-direction: column; to make the #results get forced to the top. Also, don’t forget to use the gap property to get the desired spacing you want!

    Very great job on this project!

    -L

    Marked as helpful
    0
  • deniz•100
    @denizdogannPosted about 1 year ago

    hello! :) using flexbox seems like a good idea here. you can use display:flexbox in your main container and change the flex-direction value between devices

    0

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