Skip to content
OverviewSolutions
27
Comments
18

Raymond Adutwum Agyei

@alosoftAccra, Ghana800 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Raymond Adutwum Agyei•800
    @alosoft

    @baremarco You've done a greate job with the ui. Here is how you can make html semantic

    • Change the div with the showcase class to a main tag
    • Every html page should at least one h1 tag so change the paragraph to an h1 instead of h2
  • Raymond Adutwum Agyei•800
    @alosoft

    @AdamMzkr You missed the background image and also this image resources bg-mobile.svg cannot be found on the mobile view

    Marked as helpful
  • Raymond Adutwum Agyei•800
    @alosoft

    @TonyHdez-Pi You've done a nice job but there is still room for improvement

    • On mobile, remove the height of the main tag to make the content much scrollable
    main{
    height: unset
}
    • Your box shadow too is not the best, try this
    article{
     0px 0px 0.5rem 0px #0000003b
}
    • The border radius on the bottom of the card does not show, try
    article{
    overflow: hidden
}

    Good luck!

    Marked as helpful
  • Raymond Adutwum Agyei•800
    @alosoft

    @JoeDeSantis1 There is a couple of things you need to do

    • You need to remove the border from the submit button
    button{
    border: none;
}

    To fiix your Semantic HTML errors

    • change the root element from div to main tag
    • change the "how did we do" tag to H1
    • the heading tag need to be H2

    I also noticed that when no rating is selected the Thank You screen does not show the selected rating comment. I would be nice if a user is required to select at least one rating

    Nice work!

  • Raymond Adutwum Agyei•800
    @alosoft

    @Clytax I don't use Sass so I cannot comment on your approach with the media query but I can help make your component responsive when zoomed in and out.

    You can start by removing the height and adding a gap to space the children elements out and also set a width in rem to make the rating element to adjust according to the screen size or zoom level

    .rating{
    width: 30rem;
    height: unset;
    gap: 2rem;
    margin: 1rem;
}
    Marked as helpful
  • Raymond Adutwum Agyei•800
    @alosoft

    @afaiz-space I see you've already given the cards align-self property. The last thing you have to do is give the parent-child-two a much bigger height to make the cards align-self property to show

    .parent-child-two{
    height: 18rem;
}

    Nice work!

    Marked as helpful
View more comments