Design comparison
Solution retrospective
I'm having some issues positioning the buttons, but this is my solution so far.
Community feedback
- @hitmorecodePosted over 1 year ago
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 helpful0@tabascumPosted over 1 year ago@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 GitHubJoin 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