Why are the top lines of my mobile website buttons missing?

Store Design
,

Topic summary

A user reports that the top borders of buttons are being cut off on the mobile version of their website (zukabeauty.com.au), though the desktop version displays correctly.

Technical Details:

  • Custom CSS has been applied to create uniform outline-style buttons
  • The issue affects only certain buttons on mobile devices
  • Code includes styling for .button, .button.button--primary, and hover states with 0.50px solid borders in #4C4C4D

Current Status:

  • A support representative tested the site on Safari across multiple mobile screen sizes but could not reproduce the issue
  • The user has been asked to provide more specific details about which mobile devices and versions are experiencing the problem

Next Steps:
Awaiting additional information from the user to diagnose and suggest a solution.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

I am having trouble with my buttons on my website, only on the mobile version. The top line/border has been cut off a few of the buttons. I have added the following code to ensure all of my buttons are the same (outline only).

https://www.zukabeauty.com.au/

.button{color: #4C4C4D;}
.button:before, .button:after, .button:hover:after{box-shadow:none; border: 0.50px solid #4C4C4D;}

a.button.button–primary {

background: transparent !important;

}

.button:hover{
background: #F9E6E0;
color: #4C4C4D;
}

a.button.button–primary:hover {
background-color: #FFF5F0 !important;
}

a.button.button–primary {
border: 0.50px solid #4C4C4D;
}

tahliamotteram_0-1675724004591.png
tahliamotteram_0-1675724004591.png462×999 225 KB

2

Hi @tahliamotteram

We checked your issue and no errors found. We tested on Safari and screens of different mobiles. If you still have issues, please give more specific details and mobile versions you’re using. Then, we will check it and suggest you something.