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

Responsive Design Using Flexbox and Normal CSS.

@Darshan-Pandya10

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


Any suggestions will be appreciated. Thank You!

Community feedback

Jayanth 190

@gjaynir0508

Posted

Hey, nice work. Coming to your question on the background image, I see that you have applied background on .flex-container but it is commented out and the way you have written the code for the background is not quite right. Try the following code:

body {
  background-image: url("link/to/image/1), url("link/to/image/2);
  background-repeat: no-repeat, no-repeat;
  background-position: top left, bottom right;
 }

This should solve the problem.

Marked as helpful

2

@Darshan-Pandya10

Posted

@gjaynir0508 thank you for your suggestion, I just updated the CSS code if you get time please check it out :)

0
Jayanth 190

@gjaynir0508

Posted

@Darshan-Pandya10 That's great. Now that you have CSS working, if you are curious to solve the accessibility issues mentioned be the frontend mentor, make sure to read the following article. It helped me solve it. Ensures that the document has at most one main landmark......

Good luck with your future projects.

Marked as helpful

1

@Darshan-Pandya10

Posted

@gjaynir0508 Thanks buddy I really appreciate your support. HAPPY CODING :)

0
Jayanth 190

@gjaynir0508

Posted

@Darshan-Pandya10 HAPPY CODING :)

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