# Edit button size

**URL:** <https://community.shopify.com/t/edit-button-size/308963>\
**Category:** Store Design\
**Tags:** collection-page, shopify-themes\
**Created:** [March 27, 2024, 3:29pm UTC](https://community.shopify.com/t/edit-button-size/308963 "2024-03-27T15:29:49Z")\
**Posts on this page:** 5\
**Page:** 1

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

<div class="post-metadata">

**Author:** ![idealdecorid](https://avatars.discourse-cdn.com/v4/letter/i/bbe5ce/32.png) [@idealdecorid](https://community.shopify.com/u/idealdecorid)\
**Post date:** [March 27, 2024, 3:29pm UTC](https://community.shopify.com/t/edit-button-size/308963/1 "2024-03-27T15:29:49Z")

</div>

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!

 ![Arrow error.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/8/1/8165bae3dd539c7203d16803683e35629b11ebc2.png)

---

<div class="post-metadata">

**Author:** ![niraj\_patel](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/niraj_patel/32/313006_2.png) [@niraj\_patel](https://community.shopify.com/u/niraj_patel)\
**Post date:** [March 27, 2024, 3:38pm UTC](https://community.shopify.com/t/edit-button-size/308963/2 "2024-03-27T15:38:29Z")

</div>

Hello @idealdecorid

Can you share store URL?

---

<div class="post-metadata">

**Author:** ![idealdecorid](https://avatars.discourse-cdn.com/v4/letter/i/bbe5ce/32.png) [@idealdecorid](https://community.shopify.com/u/idealdecorid)\
**Post date:** [March 27, 2024, 7:43pm UTC](https://community.shopify.com/t/edit-button-size/308963/3 "2024-03-27T19:43:18Z")

</div>

Yes of course. I haven’t launched my website yet.

[https://ideal-decor-id.myshopify.com/](https://ideal-decor-id.myshopify.com/)

rautru

---

<div class="post-metadata">

**Author:** ![Vinsinfo](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/vinsinfo/32/321847_2.png) [@Vinsinfo](https://community.shopify.com/u/Vinsinfo)\
**Post date:** [March 28, 2024, 6:11am UTC](https://community.shopify.com/t/edit-button-size/308963/4 "2024-03-28T06:11:31Z")

</div>

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

1. Go to “Online Store” → “Themes”.
2. Click action button from the current theme and select “Edit code”.
3. Locate “custom-css-shopify.css” file and add the below code at the bottom of the file.

```markup
@media screen and (max-width: 450px) {
    .pagination a.btn{
        padding: 8px 15px !important;
    }
}​

```

 ![Vinsinfo_0-1711606234308.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/3/1/310311c94ba1d1799df4d58558d04f797cf5ce35.png)

_Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support._

---

<div class="post-metadata">

**Author:** ![idealdecorid](https://avatars.discourse-cdn.com/v4/letter/i/bbe5ce/32.png) [@idealdecorid](https://community.shopify.com/u/idealdecorid)\
**Post date:** [March 28, 2024, 7:14am UTC](https://community.shopify.com/t/edit-button-size/308963/5 "2024-03-28T07:14:52Z")

</div>

It worked, Thank you so much for your support!