Skip to content
Submitted about 4 years ago

created mobile and desktop solution using flexbox

Naveen kumar A M•95
@naveen570
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

*give feedback on the overall design *what are the other ways we can move the ratings part and review part, I used transform property? *I only did the design layout for the given display size... is it enough or should i I have included for the other layouts too? *I am not sure about the font-sizes, I am still struggling on different screen sizes, any suggestions or tips would be nice :)

Community feedback

  • Cramento•185
    @theoprocreatePosted about 4 years ago

    Hey ! I used the same way to move ratings and reviews part. The page work on given display sizes but also on responsive. Maybe that on review and ratings part, fonts are smaller. :)

    1
    Naveen kumar A M•95
    @naveen570Posted about 4 years ago

    should I decrease the font-size ??

    0
    Cramento•185
    @theoprocreatePosted about 4 years ago

    @naveen570 yes to ~13px

    1
    Naveen kumar A M•95
    @naveen570Posted about 4 years ago

    okay. and I saw your solution just now, looks good. how is the rating part gradually changes its position while you change the layout. how did you do that

    0
    Cramento•185
    @theoprocreatePosted about 4 years ago

    @naveen570 define a width to your divs, set position: relative, to 2nd div left: 50% and transform: translateX(-50%) and to 3rd left: 100% and transform: translateX(-100%)

    1

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