Hi,
Can you kindly help me with this issue for my “next” and “previous” buttons on collections view page please? The problem is only in the middle pages, so it’s not on the first and the last page!
AI-generated summary
Issue: On collection pages, the “Next” and “Previous” pagination buttons displayed incorrectly on middle pages (not on the first or last page). An image illustrating the arrow/button size issue was provided.
Context: The store is not yet launched; a preview URL was shared for troubleshooting.
Solution provided: Add a CSS rule in the theme’s custom stylesheet.
- Path: Online Store → Themes → Edit code → custom-css-shopify.css
- Code: Use a mobile media query to adjust button padding
@media screen and (max-width: 450px) {
.pagination a.btn { padding: 8px 15px !important; }
}
This targets small screens (≤450px) to standardize the pagination button size.
Outcome: The fix resolved the issue; the original poster confirmed success.
Status: Resolved. No remaining questions noted. Images and a code snippet were central to the resolution.
Hello @idealdecorid
Can you share store URL?
@idealdecorid Please follow the below steps to fix the “next” and “previous” buttons on collections view page. Let me know whether it is helpful for you.
- Go to “Online Store” → “Themes”.
- Click action button from the current theme and select “Edit code”.
- Locate “custom-css-shopify.css” file and add the below code at the bottom of the file.
@media screen and (max-width: 450px) {
.pagination a.btn{
padding: 8px 15px !important;
}
}
Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.
It worked, Thank you so much for your support!