Hi I used some code to add these arrows onto my slideshow, the desktop view is how I want. However in mobile view they are showing at the bottom rather than being at each side in the middle. Also the pagination dots is not over the image like in the desktop view. Please can someone help!
Topic summary
Mobile slideshow navigation arrows added via custom code appear at the bottom on phones instead of centered on each side; pagination dots also don’t overlay the image as on desktop. Screenshots were provided to illustrate the misalignment.
Proposed fix: add a CSS media query (max-width: 768px) in base.css that adjusts the next-arrow button (class “slider-button slider-button–next”) by increasing its margin-bottom to push it higher on mobile. Steps to implement and a before/after screenshot were shared.
Result: the right (next) arrow moved to the intended position, but the left (previous) arrow remains at the bottom. The pagination dots issue was not addressed by the provided CSS.
Status: partially resolved. Key open items:
- Left/previous arrow still mispositioned (likely requires a similar rule targeting the previous-arrow selector).
- Pagination dots still not positioned over the image on mobile. Further guidance from responders is pending.
I have reviewed your requirement , I think you just need add custom font in base.css and the issue will be resolved. You can follow my instructions!
Step 1: Go to Admin → Online store → Theme > Edit code:
Step 2: Search base.css and add the script css in the end of file:
@media (max-width: 768px) {
button.slider-button.slider-button--next {
margin-bottom: 150% !important;
}
}
Step 3: Save and reload page in storefront.
And the result, Slideshow arrows on mobile view was set higher.
I hope these instructions will help you. If they are helpful, don’t forget to like and mark as the solution.
Have a nice day sir!
Hi @BSSCommerce-B2B , thanks so much for your response! I really appreciate it. I input the code and it worked for the right arrow however the left arrow is still at the bottom, I have attached a screenshot. Do you know why this would be? Thanks again! 
