Skip to content
Submitted about 2 months ago

Responsive webpage using flexbox

Matteo Lipošćak•10
@plebku
A solution to the Results summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of how I easily setup the html part and then aligned everything up until very end where I encountered an issue of specific aligns that I did a sloppy fix with margins and using widths.

What challenges did you encounter, and how did you overcome them?

I had issues with perfectly aligning elements, I did a sloppy job of overcoming some of them with margins and width.

What specific areas of your project would you like help with?

On how to perfectly align everything without having to using margins/width fix.

Code

Please log in to post a comment

Log in

Community feedback

  • Evans Macharia Kabubii•170
    @EvansKabubii

    Hi, one thing you could have an easy fix for here is:

    1. I notice your page is scrollable. You can stop this by setting the body height to 100vh, and applying box-sizing: border box; to everything. This will instantly, and easily make your page cleaner.

    2. On aligning things, play around with displays. Personally, whenever centering, I'm super biased to just apply display: flex; then using the justify-content: center; and align-items: center; to get everything centered horizontally and vertically. Avoiding margins and stuff like that may be a difficult ask, but it is possible.

    Good job, good luck

  • VeyronShark•130
    @VeyronShark

    It's great work dude. regarding your question about accuracy with precision, I noticed a lack of the usage of padding. Padding is my all saviour when it comes to spacing inside flexboxes, grids etc. I think you should try using padding most often and only using margin, or spaces that are not used anywhere else. For eg, the 4 summary types all have equal space on their left and right. so instead of using margin-left, you can make the whole .summary-container as a flexbox and give it some padding on the left and right (even top and bottom since the "Summary" heading and the "Continue" button also have space between them and the border)

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