Hi,> > I need to change the size of the save tag on mobile by like 1/2 the size> > my site is https://lux360.net/collections/all
Topic summary
A user seeks to reduce the size of sale tags on mobile devices by approximately half on their Shopify store.
Solutions Provided:
Three community members offered CSS-based solutions with similar approaches:
-
Option 1: Add custom CSS to
theme.liquidfile (above</body>tag) using a media query targeting screens up to 768px width withtransform: scale(0.7)on.product__badge.badge--sale -
Option 2: Insert code into
theme.cssfile with the same media query and transform scale approach -
Option 3: Modify
assets/theme.csswith a media query targeting max-width 767px, adjustingfont-size: 8px !importanton.product__badge.product__badge--sale
Resolution:
The issue appears resolved, with the original poster accepting one of the solutions. All approaches use responsive CSS to specifically target mobile viewports and reduce badge dimensions through either scaling transforms or font-size adjustments.
1 Like
Hey @Luxluxlux360
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hello @Luxluxlux360
Go to online store ----> themes ----> actions ----> edit code ---->theme.css
add this code at the end of the file and save.
@media screen and (max-width: 768px) {
.product__badge.product__badge--sale {
transform: scale(0.7);
}
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Hello @Luxluxlux360
Go to Online Store, then Theme, and select Edit Code.
Search for assets/theme.css Add the provided code at the end of the file.
@media screen and (max-width: 767px) {
.product__badge.product__badge--sale {
font-size: 8px !important;
}
}
2 Likes
Hello @Luxluxlux360
You’re very welcome! I’m thrilled to hear that you’re pleased with the outcome. Don’t hesitate to reach out if you need further assistance.
like and accepting the All solution. Thank you!