Skip to content
Submitted 7 months ago

Adaptive design social proof page

Justin Connell•720
@justinconnell
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I took an adaptive design approach to this project because the elements can be arranged well on the two screen sizes it was designed for.

CSS Grid was ideal for laying out the page and toggling between the mobile and desktop layout by changing the grid dimensions.

What challenges did you encounter, and how did you overcome them?

I found it challenging to use fluid sizing for the rating and review cards and opted to use static width and height properties and change those with media queries for the relevant screen sizes.

What specific areas of your project would you like help with?

Any suggestions on approaching fluid layout will be greatly appreciated.

Thanks!

Community feedback

  • Tharun Raj•1,330
    @Code-BeakerPosted 7 months ago

    Hi Justin, congratulations on completing this project!

    I checked the live preview on my phone and laptop. On mobile it works well and is responsive. But, the site isn't displaying the column layouts on desktop. This might be due to the min-width value added to your media queries.

    Consider adding a smaller min-width for your media queries and it should work.

    @media (min-width: 800px) {
/* media queries code here */
  }

    Hope this helps!

    0
    Justin Connell•720
    @justinconnellPosted 7 months ago

    @Code-Beaker Thanks for your feedback, I used the 2 screen resolutions - 1440px and 375px, but do plan to refactor this solution later this week.

    I plan to add in a breakpoint for tablet and cleaning up the layout logic.

    Thanks again,

    J

    0
    Tharun Raj•1,330
    @Code-BeakerPosted 7 months ago

    You're welcome, @justinconnell.

    Happy Coding! 🎉

    0

Please log in to post a comment

Log in with GitHub

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