All solutions

Hi, guys!

I have a question about the 5-star in the review cards. Let me explain how I did it first:

• I used a <div> and set the star icon as its background-image.

• To get 5 stars in total, I set the property background-repeat: space and adjusted the <div>'s dimensions.

• Now comes the "but": I couldn't work with the spacing to match the design given since a wider <div> would fit more starts into it after a certain breakpoint.

• And the question: is it possible to give extra spacing using the icon as background or is it only accomplished by adding the star icon itself as an html element and styling it from there?

Many thanks in advance and feedback regarding anything else will be appreciated!

Happy coding!

Hi, guys. I couldn't get my solution pixel-perfect, but I think it's close enough.

I used CSS Grid to accomplish this challenge:

• I started with the mobile layout using grid-auto-flow: row for my section container and letting each card claim its place.

• For the other layouts, I opted to fix the columns width using the grid-template-columns attribute. To position the cards, I assigned each one to a grid-area with the same name (I used the person's name for convenience) and then changed the grid layout as necessary using the grid-template-areas attribute.

Any feedback regarding the code or the design will be appreciated!

Thanks in advance and happy coding!

Hey, devs!

I thought this one was going to be easy, but honestly it got complicated when I realized I had not learned how to handle background images properly. Gladly I was able to work that out. Any feedback regarding this, my solution or any other part of my code will be appreciated.

Thanks and happy coding everyone!

Hi, devs!

Here is my solution to this challenge. Any feedback will be much appreciated!

I ran into some trouble not being able to scroll down in the mobile view. In case someone else is having the same issue, I was able to fix that by setting min-height: 100vh in the body element. Does anyone know if that's the best solution for this issue?

Thanks and happy coding to everyone!

Hi, guys. I've started learning front end development recently and this is my first challenge. It took me a while to complete the challenge, but I've learned a lot.

I have 2 questions and would appreciate if someone could clarify any of them:

1. I've seen some people using a div element as a page wrapper. Is there a special reason for using that instead of using the body element itself ?

2. How could I center an image in a div element so that when the div shrinks horizontally, the image will be cropped from both sides? (mine is being cropped from the right)

Any other advice regarding my code will be much appreciated! Many thanks in advance!