How can I effectively resize 'shop all' buttons on mobile?

[Jiozx]

 

Hi,

I have been trying to resize the "shop all" buttons on mobile but it's not working very well... how do I fix this?

This is not 2px...

Webshop: https://axiomunit.store

[hcugur · Accepted solution]

Hello, when I looked at your shop I find out that there are two places giving your elements min-width attributes. You need to override or remove them to give your elements 2px width.

 

Also your buttons are redirecting wrong pages, when I clicked to "Shop Women" it redirected me to Men's page and vice-versa. You may want to fix that too.

[Jiozx]

I will check out the code.

[Jiozx]

Actually... my current clothes are unisex so they're in both men's and women's section

[hcugur]

The products in redirected pages are identical then, if you are not planning to add other than unisex products redirecting with one "Show All" button might be a better option for UX. 

[Jiozx]

I'm planning to add other products. I found the codes and removed one of the min-width and min-height, but I still can't resize the buttons properly. I found out, when you center buttons, they cannot lose their original min-width. Do you know how I can fix this?

[hcugur]

Is this appropriate for you? If not, could you be more specific about how you want them to be looking

[Jiozx]

You have just aligned them to the left. I said when you center align them, you cannot make them smaller than their original min-width.

[hcugur]

If you want to make buttons smaller you can remove padding from following element

to align buttons center you can add 

display: flex;

flex-direction: column;

align-items: flex-start;

to the .banner__box element and 

margin-left: auto;

margin-right: auto;

to the .banner__buttons element

[Jiozx]

Why would I add more CSS to other sections when I have two CSS sections for the buttons? Anyway I fixed it by myself last night