All comments

• 

  Einars• 60

  @Einaroks

  Submitted about 1 year ago

  • Most difficult part was adding responsiveness for mobile screens because of the layout
  • Is it better to use repeating background span for the 5 stars or paste in <img> element 5 times for the icon. I used the background option, so the stars don't have spacing between them as shown in the design image.

  

  Social proof section using flex and grid

  1

  20

  

  Ahmet Hakan• 80

  @ahmetwithat

  Posted about 1 year ago

  A couple tips about responsiveness:

  • Instead of putting your media at rule at the top and having to put !important for every rule, you can just put the media at rule at the bottom of the page. That way, the code after it will not override the styles you specified in the at rule.
  • Instead of starting with the desktop layout and adjusting your code for mobile layout, you should start with the mobile layout. This is called the "Mobile First" approach and it both guarantees that the page will work on mobile, and that it does not break when you get to the responsive part.

  About the five stars

  What I did was put five <i> tags inside a container and give them a background image (no-repeat). That way you can give as much space between them as you want by giving the container flex or grid properties, or simply putting margins around them (although I definitely find flexbox much easier to work with regarding spacing). Also if you were to change the amount of stars programatically, you could just add or remove an <i> element from the container.

  Some other advices I think you'll benefit from:

  • Do not style on ID's. https://fedmentor.dev/posts/id-attribute-masterclass/
  • Never use px for font size https://fedmentor.dev/posts/font-size-px/
  • Defining media queries as rem or em is a better approach.

  (these advices were given to me recently here on frontend mentor and I have benefited from them immensely.)

  Marked as helpful

  1

  This comment has received 2 repliesShow