Solved

Badge not displaying properly on mobile

JasonP5
Tourist
4 0 2

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:

JasonP5_0-1715800444008.png

 



Mobile view:

JasonP5_1-1715800443997.png

URLhttps://rosioapparel.com/collections/all

 

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
5977 1439 1777

This is an accepted solution.

Hi @JasonP5 

Can you transfer the closing curly bracket on the top. 

This is your current code in the base.css. 

Made4uoRibe_0-1715805214815.png

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. 

Made4uoRibe_1-1715805296014.png

And Save. 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


View solution in original post

Replies 3 (3)

Made4uo-Ribe
Shopify Partner
5977 1439 1777

This is an accepted solution.

Hi @JasonP5 

Can you transfer the closing curly bracket on the top. 

This is your current code in the base.css. 

Made4uoRibe_0-1715805214815.png

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. 

Made4uoRibe_1-1715805296014.png

And Save. 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


JasonP5
Tourist
4 0 2

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

Made4uo-Ribe
Shopify Partner
5977 1439 1777

Welcome! Good to hear it works. 😊

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com