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β€’ 210

@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

Solution retrospective


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β€’ 5,610

@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 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