Shopify themes, liquid, logos, and UX
Hey,
I'm trying to customise the badges in my Dawn Theme and I can't seem to figure this part out.
I want my badge to down as the image here (the brown is goal, the black is the old style)
But I can't seem to expand the badge or center it.
My current code is below
.badge {
border: 1px solid transparent;
display: inline-block;
font-size: 1.2rem;
letter-spacing: 0.1rem;
line-height: 1;
padding: 0.6rem 1.3rem;
text-align: center;
background-color: #ac7a4e;
border-color: #ac7a4e;
color: rgb(var(--color-foreground));
word-break: break-word;
}
any advice?
Solved! Go to the solution
This is an accepted solution.
At the end of the CSS add
.card__badge{
width: 100%;
left: 0;
top: 50%;
height: 20px;
}
.card__badge span.badge{
width: 100%;
margin-right: 0;
}
It should go like this:
Please send the link to the page with the badge
here you go: https://ktpnin40cvxwcf7d-36931108908.shopifypreview.com/collections/plants?page=6
thanks in advance for the help!
This is an accepted solution.
At the end of the CSS add
.card__badge{
width: 100%;
left: 0;
top: 50%;
height: 20px;
}
.card__badge span.badge{
width: 100%;
margin-right: 0;
}
It should go like this:
Thanks ! That worked !
Happy to help
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024