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

Result summary page with CSS flexbox

@VectorGits

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


During this project I had difficulty with vertically aligning icons so they fit with text (I've had problems with this in the past)

Funny how the CSS code for that is vertical-align: center;

Hope you like it!

Community feedback

John Mirage 1,590

@john-mirage

Posted

Hello,

A solution to align 2 elements in a row is to use flexbox

<div class="row">
<svg class="icon"></svg>
<p class="text"></p>
</div>
.row {
display: flex;
flex-direction: row;
align-items: center;
}

The svg and the p will be vertically aligned.

Marked as helpful

0

@VectorGits

Posted

Thanks a lot for this insight, I really appreciate it and have learnt from it @john-mirage

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