What's your biggest current challenge? Have your say in Community Polls along the right column.

Help with hiding borders on a section for desktop only - Stiletto Theme

Solved

Help with hiding borders on a section for desktop only - Stiletto Theme

SanghitaWW
Shopify Partner
22 0 5

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

Screenshot 2024-09-23 at 12.26.13.png 

 

but keep these borders on mobile
Screenshot 2024-09-23 at 12.26.25.png

 

is there a way to do this at all?

shop url is https://leluxeworld.myshopify.com/

password is bodial

 

Thanks

Accepted Solution (1)

websensepro
Shopify Partner
1290 145 166

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>

 

websensepro_0-1727091365963.pngwebsensepro_1-1727091394433.png

 

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial

View solution in original post

Replies 4 (4)

websensepro
Shopify Partner
1290 145 166

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>

 

websensepro_0-1727091365963.pngwebsensepro_1-1727091394433.png

 

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial
SanghitaWW
Shopify Partner
22 0 5

Amazing! This worked perfectly - thank you!

websensepro
Shopify Partner
1290 145 166

Glad it worked! Your most welcome!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial

Made4uo-Ribe
Shopify Partner
9133 2180 2688

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:

Made4uoRibe_0-1727091601062.pngMade4uoRibe_1-1727091611748.png

 

 

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.