Frontend Mentor | 4LastBreath's profile

All comments

@ivan-josefSubmitted about 1 year ago

Why couldn't I align the "summary" to the left?

Results summary component solution

@4LastBreathPosted about 1 year ago

Hi again @ivan-josef, you improved. 🖖 You can't align 'summary' to the left because of your align-item:center on your class 'half'. I also noticed that you used padding or margin on every element to space them inside your flexbox. You can do it a much easier way, just use the "justify-content: space-between" (it's gonna push element at both ends of your half class), or the gap property if you want to choose precisely the space between every element of your flexbox. You'll need some padding on your right half element if you do this. And you used a span for the button 'continue', change it to button in your html.

That's how you can align 'summary' to the left and keep your flexbox

.half {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; 
    padding: (your padding);
}

.half:last-child > h3 {
   width: 100%; (if it take all width, it's gonna avoid the align-item:center)
   text-align: left;

  or
 
  margin: 0 auto 0 0; (with margin auto to the right, it's gonna push it to the left)
}

Marked as helpful

ivan-josef•70

@ivan-josefSubmitted about 1 year ago

i wasn't able to use flexbox can anyone explain to me why?

qr-code-component solution

4LastBreath•210

@4LastBreathPosted about 1 year ago

Hey, looks like there's some issues in your css. You have no width on your body and no height on your class container. If you talk about using flexbox in your body to center your card you can do it like this.

body {
   background-color: var(--light-gray);
   font-family: var(--font1);
   min-height: 100vh;
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

.card {
   padding: 18px;
   background-color: white;
   border-radius: 16px;
   box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.199);
   width: 350px;
}

and remove all style of your class container. (you can also delete it in the html).

Marked as helpful