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

Responsie design using mobile first and flex

dannochan 20

@dannochan

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any suggestion regarding the width? I wanted to give it a fixed width, but it turns to be pretty ugly when I change the screen size change? What kinds of improvemeent regarding font should be done? I am not sure about that, because the style guide suggested a font-size of 18 px for p tag, but I applied to the paragraph underneath "Great", and I dont really like it. Any other sugguestion regarding best practice? Did I overlooked something?

Community feedback

temo1203 150

@temo1203

Posted

if u wana i have my own solution on my github widths is right but have lil problem with background

0
Mazen Adel 270

@MazenAdel1

Posted

give the section fixed width like: 600px; position: absolute;

top: 50%; left: 50%; translate: -50% -50%; and this code to make the object fully centered

you can remove flex: 1; and align-items: stretch; you should also remove the hovered button code from the media query

and that's it It will be centered and pretty

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