Responsive landing page using CSS Grid and Flexbox

Community feedback

• 

  faizan•2,420

  @afaiz-spacePosted over 2 years ago

  Hey @sedcakmak,

  • Replace height:100vh with min-height:100vh; of the body element.
  • add padding:10px; and gap:20px in the .testimonials class. also, remove the margin (left and right ) from the .testimonials class of media query.
  • Remove width: 84%; from the .testimonials-item class of media query.
  • Remove position, top, left, and transform from .attribution class. also, add margin: 10px;andtext-align: center;`in the .attribution class.

  Marked as helpful

  0

  ---

  

  Sedef Çakmak•190

  @sedcakmakPosted over 2 years ago

  Hey @afaiz-space,

  Thank you for your feedback. Giving min-height:100vh to body element solves many issues, but unfortunately breaks down the header and the arrow both on mobile and desktop. I tried to fix that by changing the padding and background-size, background-position, but didn't work:( You can see desktop and mobile images here. I may need to add another div to solve that problem.

  But thank you for the advices on .attribution class.

  0
• 

  mubizzy•1,520

  @mubizzyPosted over 2 years ago

  Excellent job on this challenge! your report has a few issues though:

  1. wrap everything in your body in <main> or use semantics

  2.   it is a best practice to use both HTML 5 and ARIA landmarks to ensure all     content is contained within a navigational region.

  Hope it helps:)...don't forget to mark it as helpful 👍

  You can get more details here...click here

  0