How to remove one version of a section for desktop view - but keeping it in a different version?

Solved
Highlighted
Tourist
9 0 0

Hi,

 

In my theme I have an "Image with Text" section. I use that section 3 times on my homepage - i.e. in 3 different versions with different images. Now, I want to hide one version of that section in desktop view, while keeping the 2 other versions of it. Can you help me?

 

I know that I can add this code to the end of my style sheet, but that does not work as it would hide ALL versions of that section:

 

/* -- hide image-with-text on desktop */
@media screen and (min-width:640px){
.banner {
display: none;
}
}

 

Any suggestions are highly appreciated!!

 

Thanks a lot in advance, guys!

 

Best
Amber

 

 

 

0 Likes
Shopify Partner
1175 190 239

You want to hide one version in just desktop but keep in mobile? or want to totally hide from both mobile and desktop? 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
Tourist
9 0 0

Hi,

 

I want to hide one version in just desktop and keep it in mobile.

 

Thank you in advance!

0 Likes
Shopify Partner
1175 190 239

send me store url.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
Tourist
9 0 0

sibeau-women.com

 

 

0 Likes
Shopify Partner
1175 190 239

Let me know which of section you want to hide desktop. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
Tourist
9 0 0

The section is already hidden from desktop and mobile at the moment. But I want to only hide it from desktop.

It is a section of an image with text. So for example like the section below the statement "we are here to create products you love".

 

0 Likes
Shopify Partner
1175 190 239

Add this css in Asset->theme.scss

@media screen and (max-width: 768px) {
  #shopify-section-1561490480250{display:none;}
}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
Tourist
9 0 0

Thanks, but as I said in my original post, when I do that, then the other versions of that section will also disappear. And that is exactly the difficulty here.

How can I only hide 1 version of a section and keep the other versions of that section?

 

If i substitute e.g. "text-with-image-section" for your "shopify-section-1561490480250",

then all text-with-image-sections are hidden. But I only want to hide one of them! 

0 Likes
Shopify Partner
1175 190 239

You have to add just my css, i have user #shopify-section-1561490480250 that's mean it's only affect on this section not other because this id is unique for this section.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes