Custom 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:

[INA_MSWEB]

Hello,

I am San from MS Web Designer.

Please share the store URL so that we can assist you.

Regards,

San

[JasonP5]

https://rosioapparel.com/collections/all