Repositioning "SALE" and "SOLD OUT" text on products (BULLET THEME)

[taliad998]

I have 2 enquires, thank you to whoever can help!!!

1. I want to reposition the "SALE" and "SOLD OUT" text to be placed on the top left corner of the product image. 

2. I want to box the "SALE" and "SOLD OUT" text, I want the box colour to be white, and the text to be red.

How my page looks like: red circle is where the text is at now, and white rectangle is where I want the text to be. 

 

How I want it to look like: boxed text, but I want the box to be white and the text inside to be red.

website: link

[Zeel-prajapatii]

Hey @taliad998 please add the below css to app.css file.

.card-badge.text-end.text-start-s {
    position: absolute;
    top: 8px;
    left: 8px;
    background: grey;
}

.card-badge.text-end.text-start-s:empty {
    display: none;
}

Thanks

[taliad998]

thank you so much! that worked!

I just need to change the box to white background and text to red. Can you please advise on how to do that?

[taliad998]

Also the dimension of the box is too big on phone. how do I make the box smaller?

Thanks!!

[tim · Accepted solution]

Building on the code above, try this instead:

.card-badge.text-end.text-start-s {
    position: absolute;
    top: 8px;
    left: 8px;
    color: red;
    background: white;
    line-height: normal;
}
@media (max-width: 480px){
  .card-badge.text-end.text-start-s {
    font-size:  0.75em;
  }
}
.card-badge.text-end.text-start-s:empty {
    display: none;
}

[taliad998]

Worked perfect. Thank you so much!