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