Center Align Quick-Add Buttons on Sense Theme

Store Design
, , , , ,
1

Hello!

I wanted to ask for help to center align the quick-add buttons seen in the screenshot below.

I would also like to fix other collection pages that have the same issue.

Here’s the store URL.

Your help would be much appreciated.

Thank you so much!

Screenshot (63).png
Screenshot (63).png1919×880 180 KB

1 Like
2

Hi @trx1234 ,

Try this.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
slider-component.slider-mobile-gutter.page-width.page-width-desktop  .quick-add.no-js-hidden {
    justify-content: center;
}

Result:

Ribe_Dagandara_0-1688681047206.png
Ribe_Dagandara_0-1688681047206.png847×409 101 KB

I hope it help.

1 Like
3

It worked nicely! Thank you so much!

4

I checked the collection page and it has the same issue. Please help me center-align the buttons on this page. And how do I fix the same problem with the other collection pages? Thank you

1 Like
5

Try this one.

div#ProductGridContainer .quick-add.no-js-hidden {
    justify-content: center;
}

Result:

Ribe_Dagandara_0-1688682424297.png
Ribe_Dagandara_0-1688682424297.png977×583 172 KB

I hope it help.

1 Like
6

This code worked. Thank you!

1 Like