@istfredy
Posted
##Hello, already it is an excellent code that I see there :) But I can notice that the result block and the summary block don't have the same width. to fix that, I think that seen your code, you have to give 100% to each of the two blocks, a bit like this:
.result {
width: 100%;
justify-content: space-around;
}
the justify-content: space-around; is for the inter-space between the different blocks.
and moreover, the text: "Your result" and "Summary are not very well aligned." I think to fix this, given your code, you should do this:
.summary {
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 3em 3.2rem;
}
/* We give the same size to the titles */
.summary h1{
font-size: 2.4rem;
}
I really hope this will be useful to you. I saw your source code that's why you see exact values on my properties ;)
Marked as helpful
@danyelvarejao
Posted
@MrDeveloper01010
Thanks for review, what do you think about using flex: 1 in flex childrens?
@istfredy
Posted
@danyelvarejao
When you give flex: 1; to each child element, it means that each element is going to take as much space as possible in the parent container. In this case, if the parent container has a fixed width like in our case, and you give flex: 1; to each element, the two elements will each take up exactly 50% of the width of the parent container, just like if you have given width: 50%; to each element.
So yes you can very well use flex:1; on each child and remove the width:100%; that you put on each one.
Marked as helpful
