Badge not displaying properly on mobile

[JasonP5]

I am currently trying to get my badge to properly display on mobile but am running into one issue. I am displaying a badge for items that have a specific vendor tag. The mobile badge is not overlaid onto the product photo and is also pushing the image down. 

Badge:
{% if product.vendor == '1X-2X-3X' %}
<span class="badge-plus">Plus</span>
{% endif %}

CSS:
.badge-plus {
position: absolute;
top: 13px; /* Adjust if needed to position the badge within the container */
right: 0; /* Adjust if needed to position the badge within the container */
background-color: #464544; /* Bright orange for high visibility */
color: white;
padding: 2px 7px; /* Increase padding if the text is not fully visible */
font-size: 11px; /* Increase font size if needed */
font-weight: normal;
text-transform: uppercase;
border-radius: 5px;
z-index: 2; /* Ensures it is on top of other elements */
display: inline-block; /* Ensures the element respects padding and size */
width: 45px; /* Minimum width to ensure text visibility */
opacity: 40%;

Desktop view:

Mobile view:

URL: https://rosioapparel.com/collections/all

[Made4uo-Ribe · Accepted solution]

Hi @JasonP5 

Can you transfer the closing curly bracket on the top. 

This is your current code in the base.css. 

On very last line you see that there is 2 closing bracket. Now transfer 1 bracket on the top of the .badge plue selector like this below. 

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[JasonP5]

Wow I cant believe it was that simple. This worked perfectly, thank you for your help!

[Made4uo-Ribe]

Welcome! Good to hear it works. 😊