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 Page using SASS

Tin.Pham 250

@tin-pham

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


Can anyone tell me why my page have a white space below in desktop view. :(( Very appreciate if anyone can give me some feedback

Community feedback

Rayane 1,935

@RayaneBengaoui

Posted

Hello Tin.Pham,

Congrats for completing already another challenge ! 🙂

As @Karin1996 said, you must set min-height: 100vh because here you declared min-height: calc(100vh - 2rem).

Also, try to make the image part bigger to match the design.

Moreover, on the JS slider part there is a little bug when pressing buttons it doesn't swap directly. You should rethink your count variable, for example, it is initialized at -1, if I click on the previous button it will check if it's lower than 0. It is, thus, count will be set to 3 and after that your do count-- which is equal to count = 2. However people[2] doesn't exist (you have people[0] people[1]and you get an error.

So the logic here is not good, but I'm sure you can figure out by yourself to make it work. Try to identify all the special cases and then try to run with multiple console.log to be sure to understand what happen underthehood. I personally like to use paper for algorithms

Overall, well done for the challenge and happy coding ! 😃

0

Tin.Pham 250

@tin-pham

Posted

@RayaneBengaoui Oh Thank you so much ^ ^, I will fix my JS

0

@Karin1996

Posted

In your body css make sure min-height: 100vh is set. That should fix the white space.

0

Tin.Pham 250

@tin-pham

Posted

@Karin1996 Thank you so much, that because i tried to avoid white space (margin around) so I put height 100vh - 2rem (which cause the problem itself =.=). I fixed that

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