DAWN Theme - Sold Out Tag

Solved
RCar193
Tourist
7 0 1

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) 

 

Screenshot 2021-11-19 at 13.26.jpg

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? 

 

Accepted Solution (1)

Accepted Solutions
timkuts
Shopify Partner
20 5 12

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: 

 

timkuts_0-1637335063388.png

 

KAD::Systems - Developing apps and customizing stores
https://apps.shopify.com/partners/kadsystem
support@kad.systems

View solution in original post

Replies 5 (5)
timkuts
Shopify Partner
20 5 12

Please send the link to the page with the badge 

KAD::Systems - Developing apps and customizing stores
https://apps.shopify.com/partners/kadsystem
support@kad.systems
RCar193
Tourist
7 0 1
timkuts
Shopify Partner
20 5 12

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: 

 

timkuts_0-1637335063388.png

 

KAD::Systems - Developing apps and customizing stores
https://apps.shopify.com/partners/kadsystem
support@kad.systems

View solution in original post

RCar193
Tourist
7 0 1

Thanks ! That worked !

timkuts
Shopify Partner
20 5 12

Happy to help

KAD::Systems - Developing apps and customizing stores
https://apps.shopify.com/partners/kadsystem
support@kad.systems