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 Testemonials Slider

@tabascum

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'm having some issues positioning the buttons, but this is my solution so far.

Community feedback

hitmorecode 6,230

@hitmorecode

Posted

Nice well done. As for your problem, you could have used a div for the buttons instead of span. You can try and see if this works for you. Place the span buttons inside the picture element.

With CSS add position relative on the picture holder and position absolute on the span buttons. Use top and left to place the button where you want. Do this for both desktop and mobile.

It might be a good idea to wrap <picture> inside a div. See if it's necessary.

<picture class="slide-img">
<span class="slide-buttons">
<button id="slide-prev"></button>
<button id="slide-next"></button>
</span>
<img src="./images/image-john.jpg" alt="">
</picture>

Marked as helpful

0

@tabascum

Posted

@hitmorecode I've switched the span to div and then the ul and li to section and article. Positioned the buttons inside container after the slides and it worked out. Thanks for your feedback.

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