Skip to content
Submitted about 1 year ago

Solution #1

Rares•20
@raresmanta
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

It was difficult for me to realize just how much I can do with CSS, since everything doesn't work well at first. It takes a bunch of little adjustments and trial and error until finding the solution. It was difficult to make the Compact Summary Card, with the circle in it, but I figured it out in the end. I also struggled a bit with ordering the elements of the Extended Summary, but again, I figured it out eventually.

I am unsure about the cleanse of my code, wether there are things I did which were unnecessary and only overcomplicated the process.

I would like to ask about centering everything in the page, I struggled with that, and only centered things artificially, using padding and margins. After a while flexbox didn't work. This is also why I didn't add the shadow, as it would have bordered the entire bottom of the screen. I also couldn't figure out how to center the text vertically in the pills in the Extended Summary section. Any advice regarding centering these specific bits would be wonderful.

Community feedback

  • Aayush Jha•410
    @Aayush895Posted about 1 year ago

    Brother the reason you weren't able to center your entire component using flex is because you haven't set the 'main' element to a height of 100vh. The reason why you have to set the height of the main element as 100vh is that the align-items:center property in flex center the element relative to the specified height of the parent element. This means your result-summary component will center itself vertically relative to whatever the height is for the main component. Second of all create a div inside which you put the section and the summary component together. So the code should look something like this: HTML portion:

    <main>
     <div id="result-summary-component">
            <section>...Code for this portion...</section>
             <div id="summary-component>...Code for this portion...</div>
      <div/>
<main>

    CSS portion:

    main {
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

    The above code should center your entire result component to the center of the screen. Another suggestion would be that try to make your component responsive for different devices using the media queries in CSS. Let me know if the above snippet helps or not. Happy Coding!

    Marked as helpful
    1
  • BussinMF•40
    @BussinMFPosted about 1 year ago

    to center u got to look forward to flex tbh, you could also use grid but i guess flexbox would be more " simple " ...

    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