I only want this on my home page. How would I make the products on the left the badge stays where it is on the left and for products on the right the badge would show on the right instead of the left as it currently is. For example, for the red and pink nylon shorts, the badge would show on the right, and for the black and blue nylon shorts the badge stays on the left. My website is www.takeoverapparel.com and my password is takeover. The picture is down below to show what I mean.
@takeoverapparel - please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css
@media screen and (max-width:749px){
.slider-mobile-gutter .grid__item:nth-child(even) .card__badge {right: 0 !important; left: initial !important;}
}
To complete your requests, please follow these steps:
- Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
- Paste the code provided into the Custom CSS section.
slider-component ul.grid.product-grid > li:nth-child(even) .card.card--card.card--media > .card__inner .card__content .card__badge {
justify-self: end !important;
}
Here is the result: https://prnt.sc/M9InOPQLpOu4
I hope this helps
Best,
Daisy