Skip to content
OverviewSolutions
22
Comments
3
Milton Chung
@MiltonChung

All comments

  • Keven Molina•60
    @Kmolina009Submitted almost 4 years ago

    Hello, this is my first challenge. I have the elements placed in the right position for the desktop requirement, but I'm having issues with the mobile media-query. Will be refactoring in the meantime.

    Any feedback is very much appreciated, Thank You.

    Profile Card Component

    2
    Milton Chung•465
    @MiltonChungPosted almost 4 years ago

    Hi Keven! First of all, nice use of semantic HTML and meaningful class names! Your card looks pretty nice but one thing that could be improved on is the spacing and the font sizes of your profile stats. I used justify-content: space-evenly; in the stats container so that each stat is evenly spaced in that space, but you can play around with different properties. For your mobile media query, there's really not much for that besides anything less than around 400px, but for your case, your background circles are what's making the website a little funky. I suggest you to put the background images in your body css like this:

    body {
        ...
	background-color: $dark-cyan;
	background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
	background-repeat: no-repeat, no-repeat;
	background-position: right 50vw bottom 50vh, left 50vw top 50vh;
	overflow: hidden;
}

    so that it doesn't stretch out your website! You can always check out what I did in my profile

    happy coding!

    4
  • Milton Chung•465
    @MiltonChungPosted almost 4 years ago

    Hi! Seems like your html file is the cause. When I copied and pasted your html file into VSCode and ran the Prettier extension, it threw an error, which means your opening tags and closing tags are off. The key to finding the bug is to format your code nicely manually or using code formatter extensions like Prettier because it won't format nicely UNLESS your code is error free. Your CSS looks really nice and neat, so good job on that!

    0
  • Milton Chung•465
    @MiltonChungPosted about 4 years ago

    Hey Degoke!

    Nice start! I like your approach of using grid-template-areas! Overall, you did pretty well. Some things to consider:

    • the top left texts are left aligned and the big texts are supposed to be bigger
    • the rating bars on the right should end and be aligned with the bottom testimonial box
    • when I stretch the browser horizontally across 2 monitors, everything stretches out too much, so considering adding a max-width to your container/wrapper
    • your body tag doesn't take up the full view height, so the background image doesn't cover all the white areas. Try adding min-height: 100vh in your body tag.

    Great job! :)

    2