Shopify themes, liquid, logos, and UX
Hi I have used various code in the Dawn theme to ensure all buttons are the same (outline black only), but now I have some buttons that are a thicker border than others. I would like them all to be a thinner border.
This is my website:
https://www.zukabeauty.com.au/
This is the code I have used:
.button{color: #4C4C4D;}
.button:before, .button:after, .button:hover:after{box-shadow:none; border: 0.25px 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.25px solid #4C4C4D;
}
a.button.button--secondary {
border: 0.25px solid #4C4C4D;
}
This is the thicker border I would like to be the same as the other thinner borders:
Solved! Go to the solution
This is an accepted solution.
help me add this code so it only works on desktop
<style>
@media screen and (min-width: 998px){
a.button.button--primary, a.button.button--secondary {
border: 0px solid #4C4C4D !important;
}
}
</style>
Hello @tahliamotteram
You can try to add the below code:
.button:before, .button:after, .button:hover:after{
border: none
}
I hope my solution can work and support for you.
Best regards,
GemPages Support Team
Thank you this worked but then I lose the top border of several of my buttons on the mobile version. See below:
This is an accepted solution.
help me add this code so it only works on desktop
<style>
@media screen and (min-width: 998px){
a.button.button--primary, a.button.button--secondary {
border: 0px solid #4C4C4D !important;
}
}
</style>
You can try this code by following these steps:
Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag </body>
<style>
a.button.button--primary, a.button.button--secondary {
border: 0px solid #4C4C4D !important;
}
</style>
Hope this answer helps.
Best regards,
Victor | PageFly
User | RANK |
---|---|
155 | |
137 | |
75 | |
71 | |
62 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023