Request path contains unescaped characters
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

Submitted

profile-card-component using grid and margin

Adeniyi Smart• 520

@Iamweird2

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


hi, please review my code. i had problem positioning the background-images. any help on how i can do it easier.

Community feedback

Vanza Setia• 27,835

@vanzasetia

Posted

👋Hi Adeniyi Smart!

Put all your CSS on another file. One of the key principle of a good developer is that to completely separate the styling, the markup, and the functionality. Also it makes everyone that see your can understand and read your code much easier.

For the background-position I would recommend to see a solution from @ApplePieGiraffe since in my opinion this is the best background-position for this challenge.

For the common reset like this chunk of code and other general styling, put it outside the media query, also you need to choose whether you want to style from desktop first or mobile first.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

That's it! Hopefully this is useful!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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