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

Coding bootcamp testimonials using HTML, CSS(Flexbox), Js

@pbteja1998

Desktop design screenshot for the Coding bootcamp testimonials slider coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I struggled a lot to make the site responsive. And it's still not responsive in many of the screen sizes. Any tips or help regarding how to make it responsive is appreciated.

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Hey Bhanu, nice work on this challenge! Responsive can be hard to get right, especially in the early days.

I can see you've got max-width: 375px; on your .container. I'd recommend using a relative unit like % for this instead so that it can grow and shrink with the window size. Setting a px based max-width on your .container for desktop is fine as you typically want to max it out at a specific width for larger screens.

My container class usually looks like this:

.container {
  margin: 0 auto;
  width: 95%; /* Could be any percentage unit based on the design */
  max-width: 1240px; /* Could be any px unit based on the design */
}

This allows your container to re-size fluidly but then stop getting bigger at a set point.

A great Udacity course to learn more is this Responsive Web Design Fundamentals course. I'd recommend checking it out.

I hope this helps. Keep up the great work!

1

@pbteja1998

Posted

@mattstuddert

Hey Matt,

Thanks for the tips. I will checkout the course that you linked. By the way, this platform is awesome. Thanks for building this platform. Hopefully it evolves a lot in the future.

0
P
Matt Studdert 13,611

@mattstuddert

Posted

@pbteja1998 you're welcome! Happy to help and it's awesome to hear you like the platform. I definitely plan to keep evolving and improving it!

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