Skip to content
Submitted 11 months ago

responsive testimony grid section using html and css

anthony•170
@Codingtry123
A solution to the Testimonials grid section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

learn how to use scale to make the website more responsively

What challenges did you encounter, and how did you overcome them?

assign the space using grid template do the calculation carefully

What specific areas of your project would you like help with?

when should I using relative unit for the length of container?

Code

Please log in to post a comment

Log in

Community feedback

  • P
    MikDra1•7,450
    @MikDra1

    Use relative units for container lengths when:

    • Responsive Design: To ensure the container adjusts to different screen sizes (e.g., vw, vh, %).
    • Scalable Layouts: When you want elements to scale proportionally with the viewport or parent container (em, rem).
    • Font Size Dependence: For containers that need to scale with text size, use em or rem.
    • Fluid Grids: To maintain consistent spacing and layout proportions as the screen size changes.

    Hope you found this comment helpful 💗

    Good job and keep going 😁😊😉

  • persanu13•120
    @persanu13

    Strengths: The solution considers layout adjustments for smaller screens, which is beneficial for accessibility. Improvements: Alt text for images: Make sure every image tag, like <img>, has an appropriate alt attribute describing the content of the image. This is essential for screen readers. Color Contrast: Ensure that the color contrast between text and background is sufficient for users with visual impairments. You can use tools like the WebAIM Color Contrast Checker to verify this. Focus States: Ensure that all interactive elements (e.g., links, buttons) have visible focus states, helping keyboard users navigate your content.

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