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

responsive testimony grid section using html and css

anthony 170

@Codingtry123

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


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?

Community feedback

MikDra1 5,950

@MikDra1

Posted

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 😁😊😉

0
persanu13 100

@persanu13

Posted

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.

0

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