HTML CSS Grid and Flex

Community feedback

• 

  Aman Singh Bhogal•1,010

  @asbhogalPosted over 1 year ago

  Hi Pascal,

  This is a good attempt. I've outlined below what you need to do to get it closer to the mockups:

  • Firstly, remove the width: 100vw and width: 300px on your parent container. Neither should be used, as they cause overflow issues, which is what's happening here. You should set a max-width of, for e.g., 1000px and a width: 100% so anything below the max-width in the viewport will mean the content will occupy the full space it can.
  • You need to replace the current way the img elements are being used in the div with a <picture> element for them instead. Here's a link from MDN explaining this Link
  • Use CSS grid on the parent element for the columns and change this flow for viewports lower than 600px.
  • Locally host your Google Fonts for privacy and performance reasons. Here's a good video explaining this in further detail Link

  Hope this helps!

  Marked as helpful

  1

  ---

  

  Pascal•40

  @CodingEulePosted over 1 year ago

  @asbhogal

  thank you very much for your time. I really appreciate.

  Changed already the width, grid and tried on picture, but seems like it doesn't worked how expected. So I will try tomorrow again. Then I will also change the fonts.

  Updated already the Repository if you want to check.

  0