Shopify themes, liquid, logos, and UX
Hi,
I was wondering if there is anyway for me to turn off the border on a section on my theme for desktop only and keep them on mobile?
I would love to remove the borders between the products on this section for desktop
but keep these borders on mobile
is there a way to do this at all?
shop url is https://leluxeworld.myshopify.com/
password is bodial
Thanks
Solved! Go to the solution
This is an accepted solution.
Hi @SanghitaWW
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>
<style>
@media only screen and (min-width: 1024px) {
html.do-anim .animation.animation--complete-the-look.is-visible .complete-the-look__products .complete-the-look__product:after,
html.do-anim .animation.animation--complete-the-look.is-visible .complete-the-look__products .complete-the-look__product:before {
opacity: 0 !important;
}
}
</style>
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
This is an accepted solution.
Hi @SanghitaWW
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>
<style>
@media only screen and (min-width: 1024px) {
html.do-anim .animation.animation--complete-the-look.is-visible .complete-the-look__products .complete-the-look__product:after,
html.do-anim .animation.animation--complete-the-look.is-visible .complete-the-look__products .complete-the-look__product:before {
opacity: 0 !important;
}
}
</style>
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Amazing! This worked perfectly - thank you!
Glad it worked! Your most welcome!
Hi @SanghitaWW
Check this one.
From your Shopify admin dashboard, click on "Online Store" and then "Themes"
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag.
<style>
@media (min-width: 749px) {
.complete-the-look__products .complete-the-look__product[data-index="2"]:before,
.complete-the-look__products .complete-the-look__product[data-index="3"]:before,
.complete-the-look__products .complete-the-look__product[data-index="3"]:after,
.complete-the-look__products .complete-the-look__product[data-index="1"]:after {
background: none;
}
}
</style>
And save.
Result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024