Move Badges Higher

[takeoverapparel]

Hi, this is the current code I have to move my related collection, which is on every product page, as shown below. This is just for mobile. I want to move the out-of-stock and sales badges higher, but when I try to increase the height, it cuts off. My website is takeoverapparel.com, and the password is takeover. 

Code in base.css

/* Product Page You May Like... Badges */

 /* Green Monster TakeOver Badges */

 #Slider-template--18239906578584__featured_collection_LTLQ7U .card__badge.top.left{

  position: absolute;

  top: -15px !important;

  margin-left: -10px!important;

  margin-top: -5px!important;

}

 /* Red Monster TakeOver Badges */

  #Slider-template--18239944261784__featured_collection_46GmUa .card__badge.top.left{

  position: absolute;

  top: -15px !important;

  margin-left: -10px!important;

  margin-top: -5px!important;

}

  /* Be A Monster Sweatshirt Badges */

  #Slider-template--18553494667416__featured_collection_WJRyzf .card__badge.top.left{

  position: absolute;

  top: -15px !important;

  margin-left: -10px!important;

  margin-top: -5px!important;

}

    /* Sleeveless Panther Tee */

   #Slider-template--18553508659352__featured_collection_nyKmza .card__badge.top.left{

  position: absolute;

  top: -15px !important;

  margin-left: -10px!important;

  margin-top: -5px!important;

}

 /* Black Nylon Shorts */

  #Slider-template--18553500270744__featured_collection_U3qXnX .card__badge.top.left{

  position: absolute;

  top: -15px !important;

  margin-left: -10px!important;

  margin-top: -5px!important;

}

   /* Light Blue Nylon Shorts */

#Slider-template--18553494700184__featured_collection_XJF3hL .card__badge.top.left{

  position: absolute;

  top: -15px !important;

  margin-left: -10px!important;

  margin-top: -5px!important;

}

  /* Red Nylon Shorts */

 #Slider-template--18553494765720__featured_collection_FR8wAx .card__badge.top.left{

  position: absolute;

  top: -15px !important;

  margin-left: -10px!important;

  margin-top: -5px!important;

}

  /* Pink Nylon Shorts */

  #Slider-template--18553494831256__featured_collection_gpxEEd .card__badge.top.left{

  position: absolute;

  top: -15px !important;

  margin-left: -10px!important;

  margin-top: -5px!important;

}

}

[PaulNewton]

@takeoverapparel On desktop when I try similar code the badges are not obscured by any other elements.

On mobile add some top margin to the containing card or to the section, e.g.:

#Slide-template--18239906578584__featured_collection_LTLQ7U-2 { margin-top: 25px; } 

Unless your giving each section it's own custom properties you should try deduplicating the code and moving this into a theme level custom css.

Use an attribute selector with the section id's prefix  #Slider-template- etc etc to not have to hardcode specific ids that can break when you make future changes to section content.

[takeoverapparel]

that didnt work also this is only for mobile that why it doesn't show on desktop 

[The_ScriptFlow]

Hey @takeoverapparel,

I can see the selection of the classes are not the correct. You are selecting the css with the section ID that cannot be effect anymore when you make the theme Draft or somehow to make it live again. Because the section ID's change everytime.

Could you grant me access of the store so that I can make the correct selection of the classes.

Thanks