Part of "Add to Card" button disappears (Dawn Theme)

[xoi28]

I have tried added padding, margin but nothing works. Anyone can help me fix this?

[Made4uo-Ribe]

Hi @xoi28 

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

[xoi28]

It is in https://sommerholic.com/

Password: xoi28

The issue seems to appears depends on device...

Thank you

[Made4uo-Ribe]

Thanks for the info, check this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.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:

.button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded:after {
  border: var(--buttons-border-offset)!important;
}
.quick-add__submit  {
  --buttons-border-offset: .8px;
}

• And Save. 
• Result:
• 
  

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[wattsmork]

Hi @XOI 

You can use below code to increase the space.

.grid {
    column-gap: 24px;
}

.grid-solution {
    max-width: calc(50% - 12px);
}

But this is not good solution.

There will be an option for space in the theme settings page.

Thanks

[xoi28]

the increasing column gap seems to distort the organization in some window width. And the issue seems to persist with the last row of collection list... But I do appreciate your support! 

[wattsmork]

Did you use both code for increasing column gaps?

column-gap size must be twice by max-width size like below code

.grid {
    column-gap: 36px;
}

.grid-solution {
    max-width: calc(50% - 18px);
}

[xoi28]

Yes just changed according to what you said. Each column now only has 2 products instead of 3 and part of the button still disappears...

[wattsmork]

Or you can use below code

--grid-desktop-horizontal-spacing: 16px!important;
--grid-mobile-horizontal-spacing: 8px!important;

[xoi28]

The error appears saying that --grid-desktio-horizontal-spacing seems to be not used in this section. I tried adding the code to the custom css section.

[wattsmork]

.grid {
    --grid-desktop-horizontal-spacing: 16px;
    --grid-mobile-horizontal-spacing: 8px;
}

Could you try with this code please?

[xoi28]

It solves issue when using Chrome but the issue persists if I use either Safari or tablet to access.

[wattsmork]

Or you can customize the space here

[wattsmork]

@xoi28 Please use this solution

[xoi28]

I tried different combinations. Still no luck for safari and tablet view.