Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

By using Html and css flexbox and css grid

Rohan deshmukhโ€ข 70

@Rrdesh07

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


1] The main problem i was having when i was desinging the desktop version and there the height of body i had given 100 vh and for main i gave 100% it was working fine there , but when i was resizing for the smaller view the footer was coming up between 4 and 5 testimonial card and there i changed the body height to 100% and it got corrected but why it is like that why didn't the 100 vh worked there , can some one explain me that ? 2] any other suggestions also if requires

Community feedback

Marley Semendeโ€ข 570

@Marley-Semende

Posted

Hi @Rrdesh07. The issue you encountered with the footer appearing between testimonial cards when resizing for smaller views may be related to the use of height: 100vh for the body and height: 100% for the main container. The problem arises when the body height is constrained to 100% of the viewport height, and there might be other elements such as headers, footers, or margins that are also taking up space. When you set height: 100% for the main container within the body, it means the main container will take up 100% of the height of its parent, which is the body in this case.

You might consider using min-height: 100vh

instead of height 100vh on the body, as using min-height on the body guarantees that the body will be at least as tall as the viewport height, but it can expand further if needed to accommodate its content.

I hope this helps. Happy coding:)

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord