Responsive Page!

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Desktop layout content looks thinner compared to the design and the site is not responsive at the moment. When you say responsive, it does not only mean that it looks good on desktop and mobile, it is responsive if when even resizing the browser's width, the layout still looks great. Try to inspect the layout in dev tools, try changing the screen's width and see how the site looks like. Though the mobile layout looks good.

  Jesse Ma already stated great tip on this one, just going to add some suggestions as well:

  • Avoid using height: 100vh on a large container like the body tag as this limits the element's height based on the remaining screen's height. Instead use min-height: 100vh, this takes full height but lets the element expand if needed.
  • Same for the main do not use vh unit and you don't really need to alter the height props though, removing that would be great.
  • I wouldn't really use header on this one since it just looks like a main-component all throughout.
  • For the ratings section, you don't really need to use ul on those, you could have just use background prop and set all those 5 stars for each container, that way you won't have to use ul on it.
  • Each testimonial could use more width or just in general that whole content of the page could use more width to be wider.
  • Person's img should only use the person's name, no need to add the verified buyer.
  • When using heading tag, make sure you aren't skipping a level. If you use h3 make sure that h1, h2 are present "before" it.
  • Another tip, you can use blockquote on this one since they are suited for testimonials.
  • Lastly, making the site much responsive :>

  Aside from those , great job again on this one.

  1
• 

  Jesse Ma•95

  @jma26Posted about 3 years ago

  Not a bad start! I'd recommend looking into updating the semantic elements of your upper-half part. You have a header tag wrapping the actual header and the star review section. I think it'd be wise to actually separate the star review section as its own section to be more semantically valid

  1