Fylo data storage component

Community feedback

• 

  Venus•1,790

  @VenusY

  Posted over 1 year ago

  Great work on this challenge!

  While playing around with the viewport widths on the desktop version of the site, I noticed that if you extend the width of the viewport beyond 1440px, the background pattern no longer spans the entire width of the viewport.

  This is because you've set the max-width property on img tags to 100%.

  To make it take up the full width of the viewport, you can make one simple change, which is setting its width property to 100vw, and then removing the max-width property.

  However, since you're using Tailwind, this would be equivalent to adding .w-screen to the background image element.

  I also noticed a similar issue with the background image for the mobile version.

  On larger viewports that still fit under the mobile media query, there is a small bit of whitespace at the top of the screen between the viewport and the background image. The background image also doesn't take up the entire width of the viewport.

  You can fix this by adding height: 100vh and width: 100vw to the element. In other words, you can add the .w-screen and .h-screen classes to the mobile background image.

  Other than that, this is a very good solution!

  Hope this has been helpful! :)

  01

  Marked as helpful