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

Mobile first Responsive Testimonial slider using HTML, CSS, and JS

#accessibility
Harsh 190

@HarshPrateek559

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

Report

3

Accessibility Issues

1

HTML Issues

View Report

Harsh’s questions for the community

Hi everyone! I am trying to make this project as responsive and resilient to viewport changes as I can but it is not going too well. It is only looking good on my laptop or any phone but not on a tablet or any desktop screen greater or smaller than 1440p. Even when I was optimizing for the 1440p display size, it was not as accurate as I was getting on my laptop. I would appreciate any suggestions regarding this or any other problem that a user can encounter in the app.

Community Feedback

@Kamasah-Dickson

Posted

I really understand your situation but understand that times like this will come. All this is a sign that you are having an experience and growth in what you are doing. The small advice that I have of you is.

  • Always do mobile first approach whenever you are making a project because a lot of people are viewing your sites on mobile more than PCs. Am actually reviewing your solution on a mobile.

  • Use max width to determine how you want your container to span on different screen sizes. eg

.Max-width  {    //am using this to wrap your solution or a section
max-width:1200px;     // I know you understand this. this specifies how far your want your Eg Your container to span to
width: 700px;    // this is the width of you container you are centering in the max-width wrapper.
margin: 0 auto;     //  I know you understand this. Just to center it.
} 

With the above mention you can use grid or flexbox for your solution.

I noticed that there was no enough margin bottom to separate the img and the texts on mobile devices. Using Grid gap or gap will deal with your spacings unless you want to modify your gaps.

Besides your solution looks great you really did well, cheer up👍 Great job there, have a nice day and a happy coding👍💻

Your solution will be my next challenge am gonna build

Marked as helpful

0

Please focus on giving high-quality, helpful feedback and answering any questions HarshPrateek559 might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!