How to change custom badges / sale badge position and sizing

Store Design
,
1

I’ve added some custom badges which look fine on desktop, but i’ve realised on mobile view the badges are too big and are squashed together. How can I make them smaller and neater, and have some padding between the badges?

Also on desktop view how can I edit the badges to be stacked rather than in a row?

Thank you in advance!

IMG_9365.PNG
IMG_9365.PNG828×1792 108 KB

4

Good day @saintdante , Could you please share your store URL and password so that I can provide you with a solution?

5

Hello @saintdante ,

I hope you are doing well!

Can you please share the password of the store?

6

Hey @saintdante

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

7

Hi, thank you!

The URL is : https://www.saintdante.co.uk/

Password is: aeternum

8

Hi, thank you for getting back!

The URL is : https://www.saintdante.co.uk/

Password is: aeternum

9

Hi @saintdante,

Please go to Customize > Theme settings > Custom CSS and add code:

@media screen and (max-width: 749px) {
.card__badge .badge {
    padding: 0.5rem;
    font-size: 0.8rem;
    display: block;
    margin-bottom: 0.25rem;
}
}
10

Hey @saintdante

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (max-width: 767px) {
.card__badge.bottom.right span {
    font-size: 11px !important;
}
.card__badge.bottom.right {
    display: flex !important;
    flex-flow: column !important;
    gap: 0.5rem !important;
}
}
</style>

RESULT:

image
image375×666 71.7 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed