Skip to content
OverviewSolutions
10
Comments
5
amrajat
@amrajat

All comments

  • Ruan Gomes•100
    @rug19Submitted over 1 year ago

    It wasn't difficult but I've started to learn programming so there are a lot of things that I need to know, One point that I think was complicated is how to align the elements to adapt to screen size. Could someone help me with this?

    HTML e CSS

    2
    amrajat•170
    @amrajatPosted over 1 year ago

    Congratulation on submitting the challenge. I have a few suggestions please consider refactoring its code if you find it useful.

    • You can align this component horizontally and vertically by multiple hacks such as margins, display: flex + justify-content: center + align-items: center, or by display: grid, place-items: center.

    • you should have a minimum of one h1 heading per page for accessibility.

    happy coding :)

    Marked as helpful
    0
  • amrajat•170
    @amrajatPosted over 1 year ago

    Congratulations on completing the challenge.

    I want to suggest the below points please consider if you feel helpful.

    • Why did you wrap this component within content-wrapper I feel it does just unnecessary nesting.
    • This component is not centered horizontally and vertically if can fix this easily with easy hacks such as margins, using Flexbox or grids.
    • You did not choose the right breakpoint for the media query. always choose the breakpoint where the design starts breaking.
    • max-width: 50% on .content is not a good value here. try something more meaningful here you could have used rems for ease instead of screen-based units %s.
    • the box shadow seems a little dark here which is not looking realistic please consider reduced $alpha

    You can see my solution for the same challenge.

    https://www.frontendmentor.io/solutions/results-summary-component-html-css-sass-obzWVuf4OG

    Happy coding :)

    1
  • amrajat•170
    @amrajatSubmitted over 1 year ago

    Any feedback or suggestion is appreciated.

    • I am facing issues with the button's vertical alignment, if the text gets long the button doesn't vertical-align automatically to the end. I tried the justify-self: end to button, but it's not working, please share your thoughts on this, and why it's now working.

    • I used the auto-fit hack to automatically adjust grids with screen size, please share your thoughts on this approach.

    thank you@

    Responsive Grid with auto-fit, 3 Column Preview Card

    1
    amrajat•170
    @amrajatPosted over 1 year ago

    I will refactor(especially HTML) once I get some suggestions and feedback. Ty

    0
  • amrajat•170
    @amrajatPosted over 1 year ago

    Congratulations on completing the challenge. You're using hardcoded width and height .card { width: 330px; height: 670px; border-radius: 5px; background: #fff; display: grid; } which I think is not a good practice, always use relative units such as rem, em, or %s it will help us when we go responsive with media queries.

    another issue I found is you should set align-items: center to .prices class to center the children(s) of the parent vertically.

    above all your solution is great. good luck

    Marked as helpful
    1
  • amrajat•170
    @amrajatPosted over 1 year ago

    Congratulations on completing the challenge. There are a couple of hacks for centering a div horizontally and vertically. One easy hack is flex -> set display: flex, align-items: center, justify-content: center to the parent element. Hope this helps :)

    Marked as helpful
    0