Skip to content
OverviewSolutions
22
Comments
6
Unkookerinho
@Unkookerinho

All comments

  • Unkookerinho•460
    @UnkookerinhoPosted over 1 year ago

    Hi raf0411! 👋 Congratulations on succesfully completing the challange! 🎉

    Your solution looks great! There are some ways to improve spacing of elements inside your container:

    • Delete all the margin-left's from your code, it's not a good practice to center things this way.
    • Put everything below image in another div, and change it to:
    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;.

    • To fix .plan-container we add width: 100%; so we make sure it is as wide as it can possibly be inside its parent div.
    • You should now adjust all the margins that are left so it looks how you want it to.
    • In your next project, try to first create main container that you will center and put all content of page to it. This way working will be much easier, and you would be able to add padding to it so on smaller screens content of the page doesn't touch edges of the screen. You should mess more with flexbox or grid to layout your page and you will be good 😊

    I hope you find my answer helpful and I wish you happy coding! 😃 Keep up your great work! 😊

    Marked as helpful
    1
  • Unkookerinho•460
    @UnkookerinhoPosted over 1 year ago

    Hi SrishtiSk! 👋

    Congratulations on succesfully completing your first challange! Your solution looks great! 😊

    There are few you can improve

    • To better center main element of page on screen, you can set display of the body to flexbox and configure it corretly.
    body {
display: flex;
align-items: center;
justify-content: center;
}
    • Instead of using ID's, try to use classes most of the time, because they can target multiple elements at once which will be useful once you start working on more complex projects

    Once again, congratulations on completing the challange and welcome to the site! 🥳🎉 Keep up your great work and I wish you happy coding! 😃

    0
  • Unkookerinho•460
    @UnkookerinhoPosted over 1 year ago

    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
    0
  • RoeeKa•20
    @RoeeKaSubmitted over 1 year ago

    Probably overdoing it with the flex usage... It works though. Open to any feedback.

    Too much flex?

    2
    Unkookerinho•460
    @UnkookerinhoPosted over 1 year ago

    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:

    • Instead of using id's it's better to use classes. It is far better practice, because with id you can target only one element at the time, which generates longer and less readable codes. With classes you can target few elements at once, and that is really useful in lot of circumstances.
    • Instead of using div for everything you should try semantic HTML5 markup, which is a lot more readable and easier to work with. You will have sections like main, section or footer instead bunch of divs everywhere. You can read more about it there - https://developer.mozilla.org/en-US/docs/Glossary/Semantics
    • Instead of setting up width and height of body to 100%, you can use min-width and min-height, because it causes problems on mobile where screen is much higher and cuts off content of the page. You would then need to change min-height of main container to 100vh, so it covers whole screen. In my projects I put all of my content directly into the body and center it instead of making seperate container for this task, set 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
    0
  • Illed Huilen•140
    @IlledNacuSubmitted over 1 year ago

    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 🙇🏻‍♀️

    Responsive card with gradients

    1
    Unkookerinho•460
    @UnkookerinhoPosted over 1 year ago

    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
    0
  • Ernest Somto Michael•210
    @ErnestsomtoSubmitted over 1 year ago

    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

    Result Summary component

    1
    Unkookerinho•460
    @UnkookerinhoPosted over 1 year ago

    Hi Ernest! 👋 Congratulations on completing this challange! You did a great job! 😃 I found some things that can you improve in your code.

    • Instead of using px for almost everything in your code, learn about using another units like ems or rems that are responsive unlike pixels. Here is really helpful video about when to use particular unit - https://www.youtube.com/watch?v=N5wpD9Ov_To
    • To center main content of your page you can use flexbox on the body like this:
    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.

    • Instead of 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.
    • You can add 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.
    • In your HTML file instead of using bunch of divs, you should use semantic html5 markup, like <main>, <footer> or <section>. This is important to make your code more readable and easier to understand. You can read more about it there - https://developer.mozilla.org/en-US/docs/Glossary/Semantics

    I hope you find my answer helpful, and I wish you happy coding! 😃 Keep up your great work!

    Marked as helpful
    0