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

[SanghitaWW]

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

[websensepro · 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!

[SanghitaWW]

Amazing! This worked perfectly - thank you!

[websensepro]

Glad it worked! Your most welcome!

[Made4uo-Ribe]

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!