Submitted over 3 years ago

Social-proof-section

Artem Ponomarenko• 365

@ArtemPonomarenko

Preview site View code

This is a solution for...

Social proof section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello there,

Had some issues with "5 golden starts" background. I went with "background-repeat: space" option, but it didn't give me enough space between those stars. Is there any other way of spacing them ?

The second problem was with mobile design. It seems like I can't shrink my browser down to 375px so I couldn't use "PerfectPixel" Chrome extension. All other extensions for responsive design would open in a different window which wouldn't allow "PerfectPixel" or "Page Ruler Redux" on it. So ,y end result with mobile version is rather poor. =( I was wandering if there some good tools or extensions for that? Thank you

I really hope I was clear enough with the questions =)

Community feedback

Anna Leigh• 5,135

@brasspetals

Posted over 3 years ago

In order to test for different screen sizes, are you able to get into either Responsive Design Mode (Firefox) or the Device Toolbar in Chrome (or Chromium based browsers)? Here's how to get to each:

In Firefox, select Responsive Design Mode from the Web Developer menu or press "Ctrl + Shift + M" if on PC or "Cmd+ Opt + M" on MacOs. More info here
In Chromium-based browsers, open Developer tools from the More tools menu or press "Ctrl (or Cmd if on MacOS) + Shift + M" . Then click the Toggle device toolbar icon. More info here

Artem Ponomarenko• 365

@ArtemPonomarenko

Posted over 3 years ago

@brasspetals

Thank you friend! Found it! Can not believe I missed that! Cheers!

Yemisrach• 1,430

@Yemisrach15

Posted over 3 years ago

Hi Artem, if you are using chrome, go to inspect then ctrl + shift + m (windows) will lead you to toggle device toolbar. You can set responsive on the dropdown menu at the upper corner and the width to 375 or as you wish. I'm not sure whether it works for everyone but you can try.

I noticed there are six stars instead of five. Otherwise your solution looks great. Hope this helps 😊

Artem Ponomarenko• 365

@ArtemPonomarenko

Posted over 3 years ago

@Yemisrach15

OMG I am so silly! Completely forgotten about that button! Thank you very much! It does work now!

Emmilie Estabillo• 5,540

@emestabillo

Posted over 3 years ago

Hey Artem, this looks really good! Check out the second answer in this SO post for background-repeat. It seems you need to use and adjust the actual svgs if you stick with that property. It might be easier to use flex for the stars.

I'm not sure why you couldn't adjust your browser to the specified width. You did very well though with the mobile view, save for the second background which should be placed at the bottom of the screen.

Hope this helps!

Artem Ponomarenko• 365

@ArtemPonomarenko

Posted over 3 years ago

Thanks for the link! That's the option I tried, but it didn't work out. It does not let you change the spacing. Will try flex option next time. Does it mean creating an element for each star? Seems a bit excessive. Thanks anyway!

Emmilie Estabillo• 5,540

@emestabillo

Posted over 3 years ago

@ArtemPonomarenko I can't think of an alternative though aside from embedding the svgs or using the provided star image. Both require repetition in html..which we use all the time. In this project for example, testimonial and ratings divs appear more than once. Not exactly the same, I know lol but the argument is there :-)

Please log in to post a comment

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