@raf0411
Submitted
I find it difficult resizing the width of the paragraph to match the design. Because it messes up every element of inside the div.
@Unkookerinho
@raf0411
Submitted
I find it difficult resizing the width of the paragraph to match the design. Because it messes up every element of inside the div.
@Unkookerinho
Posted
Hi raf0411! π Congratulations on succesfully completing the challange! π
Your solution looks great! There are some ways to improve spacing of elements inside your container:
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
This way everything will be perfectly centered without using margins. Now we can add some padding to make it look nicer without touching edges of div - padding: 2rem;
.
width: 100%;
so we make sure it is as wide as it can possibly be inside its parent div.I hope you find my answer helpful and I wish you happy coding! π Keep up your great work! π
Marked as helpful
@SrishtiSk
Submitted
@Unkookerinho
Posted
Hi SrishtiSk! π
Congratulations on succesfully completing your first challange! Your solution looks great! π
There are few you can improve
body {
display: flex;
align-items: center;
justify-content: center;
}
Once again, congratulations on completing the challange and welcome to the site! π₯³π Keep up your great work and I wish you happy coding! π
@dcodeprodigy
Submitted
Still wondering how to center a div to the middle of the screen
@Unkookerinho
Posted
Hi Real Prodigy! π Congratulations on succesfully finishing challange! π
To center a div to the middle of the screen, you can use flexbox on body. To do this, you write:
min-height: 100vh; /* We make sure that body covers entirety of the screen so then we can center all elements on screen, we use min-height instead of height, so we dont have any responsiveness issues that would be caused by changed size of the screen */
display: flex; /* There we set display of body to flexbox */
flex-direction: column; /* Sets direction of flexbox to column */
justify-content: center; /* Centering elements inside body on main axis */
align-items: center; /* Centering elements inside body on cross axis */
You can also do this to main element of your page:
margin: auto; /* Setting margin to auto pushes .attribution section to the bottom of the screen, because that way margin covers all the available space */
I hope you find my answer helpful and I wish you happy coding! π Keep up your great work! π
Marked as helpful
@RoeeKa
Submitted
Probably overdoing it with the flex usage... It works though. Open to any feedback.
@Unkookerinho
Posted
Hi Roeeka! π Congratulations on succesfully finishing challange! π
Your flex usage looks good to me! There are some other things that you could improve in your code:
min-height: 100vh;
and center everything with flex, everything on body. Then you can comfortably work on main content of your page which is nicely centered. You can also use margin: auto
on that main element, so .attribution is pushed to bottom of the page.I hope you will find my feedback helpful and I wish you happy coding! π Keep up your great work!
Marked as helpful
@IlledNacu
Submitted
Hi! Today I did this challenge and there are things that still makes me feel uncomfortable about the results, like the fact that boxes deform depending on the device. It was more difficult than I expected π If you have any recommendation, it would be very helpful. Thanks in advance ππ»ββοΈ
@Unkookerinho
Posted
Hi Illed! π You did a great job completing this challange! π
To make sure boxes look good on all devices, I would reccomend changing @media (max-width: 375px)
to width where main content that you want to wrap starts touching sides of the screen, which in this case is about 640px. After this slight change your page looks perfect on all devices! I hope that this is answer to deforming boxes. If not, you can ask further!
Also, if you want to make elements of summary always be on furthest right/left (I mean reaction on left, and then 80/100 on right etc), you could change justify-content to space-between in .white-box section instead of gap, so it's nicely placed on both sides with space between them. Then you would have to have some fun in html to put icons and category names together, and add some padding in css on left and right to make it look better. Icons can be moved with translateY too, because they will be too high if you don't do that. Maybe you will find this cool, even tho your question was about something else, it just makes this section look better on all devices.
I hope you found my answer helpful! π Keep up your great work, and I wish you happy coding! π
Marked as helpful
@Ernestsomto
Submitted
The hardest part of the project was getting the gradient color just right, i didn't though... i will keep practicing though . This is my own solution to the result summary component. i used html mark up and Css flex
@Unkookerinho
Posted
Hi Ernest! π Congratulations on completing this challange! You did a great job! π I found some things that can you improve in your code.
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
First 4 lines are setting up flexbox and centering all its contents in a column, so attribution will be under main content. Setting min height is to make sure that body will cover entirety of the page.
width:800px
you can use max-width:800px
, so responsiveness of the page is much better - when screen is smaller width of main element will shrink, but on bigger screen it will take all the space you want it to.margin: 60px auto
on .Wrapper
is messing up your layout, especially on mobile where it just leaves 60px gap on top of the screen, so it's better removing this line.target="blank"
in your attribution, it will open a new tab in the browser which is a lot better than opening it in the same tab.I hope you find my answer helpful, and I wish you happy coding! π Keep up your great work!
Marked as helpful