Dawn Theme: Mobile Website "Sold Out" Badge is covering the product image.

Store Design
1

IMG_7164.jpeg
IMG_7164.jpeg1284×2778 134 KB

Thank you team!

url: https://fuclx2xng8e0r3n6-42324328597.shopifypreview.com

2

@diego_ezfy , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > base**.css** and paste this at the bottom of the file:
@media (max-width: 500px){
    .card .badge{
        transform: scale(.65);
        
    }
}

Kind regards,
Diego

3

@iamdawnumcm

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > base**.css** and paste this at the bottom of the file:
@media (max-width: 749px){
    .card .badge{
        transform: scale(.65);
        
    }
}

Thanks!

4

hii, @iamdawnumcm
Paste this code on top of the theme.scss file.

@media only screen and (max-width: 768px) {
span.badge.badge--bottom-left.color-inverse {
    position: relative !important;
    top: -15px !important;
}
}

Thank You.

5

Hi. It is still really close on the mobile website.

Please let me know if you can move it a bit further

Thanks!

6

hello @iamdawnumcm

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 768px) {
badge.badge--bottom-left.color-inverse {
    position: relative !important;
    top: -20px !important;
}
}
7

Hi! I don’t have a theme.css as I am in Dawn mode.

Can you show me how to do it on my website?

https://i1ab9oy1marbkh8u-42324328597.shopifypreview.com

8

@iamdawnumcm

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > base**.css** and paste this at the bottom of the file
@media only screen and (max-width: 749px) {
badge.badge--bottom-left.color-inverse {
    position: relative !important;
    top: -20px !important;
}
}
9

Hi It is still really close!