Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Ruan Gomes• 100

    @rug19

    Submitted

    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

    @amrajat

    Posted

    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

    @amrajat

    Posted

    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

    @amrajat

    Submitted

    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

    @amrajat

    Posted

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

    0
  • amrajat• 170

    @amrajat

    Posted

    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

    @amrajat

    Posted

    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