Cornerstone - button outline

Store Design
, ,
1

Hi there,

I’m using the theme cornerstone and on the homepage, there is a promotional grid. No matter what I do, the buttons won’t get an outline.

I have tried this code which is half-way working but the button is too big (height) and I would prefer the wording “shop bestseller” in one line.

Is someone able to assist?

Store URL www.31031b-75.myshopify.com

PW: aubiep

Thank you.

.promotion-grid-item__promotion-text {
display: inline-block; /* Makes the link behave like a button /
background-color: #CEB5D6 !important; / Button background color /
color: #ffffff !important; / Text color /
padding: 10px 20px !important; / Padding to create a button effect */

outline: 1px solid #ffffff !important; /* Thinner white outline /
border-radius: 20px !important; / Rounded corners /
text-align: center; / Centers the text /
text-decoration: none !important; / Removes underline /
box-shadow: none !important; / Removes any shadow */
}

meld78_0-1728250223716.png
meld78_0-1728250223716.png1405×447 93.2 KB

meld78_1-1728250246215.png
meld78_1-1728250246215.png1403×406 90.4 KB

1 Like
2

Hi @meld78

Reduce the padding left n right and add this code.

p.promotion-grid-item__promotion-text.ff-body {
    white-space: nowrap;
    padding: 10px 5px;
}

And save.

Result:

Made4uoRibe_0-1728252035558.png
Made4uoRibe_0-1728252035558.png933×351 65.8 KB

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