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

Basic HTML & CSS

@allisonkbates

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 on how to reduce the CSS needed for the change in layout between mobile and desktop?

Community feedback

Martin 1,150

@ringm

Posted

Hey Allison! Great job, the site looks really good! Well done.

Regarding your question, I would suggest trying a layout with flexbox like this:

.container {
  width: min(90%, 1100px);
  margin: 0 auto;
}

.row {
  display: flex;
  flex-direction: column;
}

.col {
  width: 100%;
}

@media (min-width: 600px) {
  .row {
    flex-direction: row;
  }
}
<div class="container">
  <div class="row">
    <div class="col">H1 and text</div>
    <div class="col">Ratings</div>
  </div>
  <div class="row">
    <div class="col">Comment 01</div>
    <div class="col">Comment 02</div>
    <div class="col">Comment 03</div>
  </div>
</div>

This would take care of the overall layout both for mobile and desktop, I hope it helps!

Happy coding!

1

@allisonkbates

Posted

Ah that makes sense, thanks! I'll have to try it out!

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