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

Submitted

Desktop-first using flexbox

@dthuy901

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


On the line with stars, I used span containing img star, I realized that img star not in span. I tried so hard to fix but I can't. Hope to receive your feedback.

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hey, Diem Thuy Huynh! 👋

Nice job on this challenge! It looks good and responds well! 👍

In addition to rfilenko's feedback, I suggest,

  • Setting the text-align property of the heading and subheading to center in the tablet and mobile layouts of your page.
  • Perhaps adding a wee bit of padding to the sides of the page in the mobile layout so that there's some space between the content and the edges of the screen.

Keep coding (and happy coding, too)! 😁

1

@dthuy901

Posted

@ApplePieGiraffe thanks for your feedback. So helpful ^^~ .

0
Roman Filenko 3,335

@rfilenko

Posted

Hey, good job. Have a few tips for you:

  • .intro > ul > li > span > span - don't use some many selectors to target elements in css, usually one class is enough;
  • not sure what the issue is with the stars - would probably just use imgs or spans in a list (img as background).
  • you can try mobile-first approach on next project.

Also you can look into sass or css variables. 😉 Cheers, Roman

1

@dthuy901

Posted

@rfilenko Your tips are so useful for me. Thank you very much, I'd work on that ^^

0

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