Social proof section using flex and grid

Community feedback

• 

  Ahmet Hakan•80

  @ahmetwithatPosted over 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

  ---

  

  Einars•60

  @EinaroksPosted over 1 year ago

  @ahmetwithat Thank you for your answer! Every time I spammed !important on media queries I thought that I was doing something wrong.

  0

  

  T

  Grace•31,210

  @grace-snowPosted about 1 year ago

  @ahmetwithat would you mind tweaking the first url you've shared there? I think there is an extra quotemark inside the markdown url which means it's rendering as https://fedmentor.dev/posts/id-attribute-masterclass/%22 instead of https://fedmentor.dev/posts/id-attribute-masterclass

  The correct url is https://fedmentor.dev/posts/id-attribute-masterclass

  I hope this helps

  Google search console flagged this as a referrer sharing a 404 link :)

  0