Responsive site with a usage of flexbox

Community feedback

• 

  Web Frog•1,840

  @MasterDev333Posted almost 4 years ago

  Great Work. I have some suggestions.

  • It would be great if you set some media queries to make it more responsive. The rating boxes goes down when screen is under 1300px;
  • And you used img tags to draw stars. But if you want to draw 4.5 or 4.2? I suggest you use a background-image to draw stars. You can set the width of the rating-box to draw 4.5 or 4.2. Hope it helps. Happy coding ~

  2

  ---

  

  Vytas•435

  @vytkuklysPosted almost 4 years ago

  @MasterDev333 I appreciate your suggestions. Thanks a million for opening my eyes to a better way of drawing stars!

  0
• 

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  Hi Vytautas,

  A few suggestions from me in addition to the above:

  • Try wrapping the header and stars container in a flex element rather than positioning the stars absolutely and using margin-right on the header. That will be much more flexible as the screen grows/shrinks.
  • Remove the icon stars alt text and use alt="" instead. The reason for this is the following text says there are 5 stars already, so these are meaningless images to screenreaders (or similar technology) anyway.
  • You can place two background images on one element, so I would move your bottom image to the same .container as your top one. Then it would be correctly positioned against the whole screen rather than the container's inner-content
  • On any element you want to style, use a class. Try not to use elements or nested selectors in your css, as this increases specificity unnecessarily and becomes hard to override in bigger projects. e.g. Rather than header h1 (specificity of 20), use a class on that h1 like .header__h1 (specificity score of 1). The lower the specificity the better!

  Hope that's helpful input, sorry it's just a long list. This really is good for a first challenge, I look forward to seeing more from you! :)

  1
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hey, Vytautas! 👋

  Good work on this challenge! 👍

  Two things I can suggest to improve your solution would be to add a max-width to the main container or wrapper to prevent the content of the page from looking too stretched on extra-large screens and allowing the width of the review and testimonial boxes to decreases when the width of the screen becomes too small to accommodate the boxes at their regular width (you can probably do that by using max-width and width: 100%). 😉

  Keep coding (and happy coding, too)! 😁

  1

  ---

  

  Vytas•435

  @vytkuklysPosted almost 4 years ago

  @ApplePieGiraffe Thank you for suggestions 👍

  0