Skip to content
Submitted over 1 year ago

By using Html and css flexbox and css grid

Rohan deshmukh•70
@Rrdesh07
A solution to the Testimonials grid section challenge
Preview (opens in new tab)Code (opens in new tab)

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

Code

Please log in to post a comment

Log in

Community feedback

  • Marley Semende•570
    @Marley-Semende

    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

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