Solved

Hide a section in desktop/mobile view

sanderrisseeuw
Excursionist
17 0 5

Hi everyone,

I currently have a section which I don't want on the mobile view (and the same otherwise aswell). I know a little bit of coding, but I can't figure this out unfortunately. Could someone help me with this problem? I am currently using the debut theme. I hope the pictures will make my problem clearer.

Website: www.breakinglimits.nl

Thanks in regards!

Greetings,

Sander

Desktop VersionDesktop VersionMobile VersionMobile Version

Accepted Solutions (2)

Hardik29418
Shopify Partner
2859 407 1073

This is an accepted solution.

Please place this code at the end of theme.scss

@media only screen and (min-width: 750px) {
#shopify-section-1609769959906 {
display: none;
}
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

View solution in original post

Hardik29418
Shopify Partner
2859 407 1073

This is an accepted solution.

@media only screen and (max-width: 750px) {
#shopify-section-16073694680066065f {
display: none;
}
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

View solution in original post

Replies 15 (15)

Hardik29418
Shopify Partner
2859 407 1073

This is an accepted solution.

Please place this code at the end of theme.scss

@media only screen and (min-width: 750px) {
#shopify-section-1609769959906 {
display: none;
}
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
sanderrisseeuw
Excursionist
17 0 5

Hi @Hardik29418 

 

It worked for desktop, thank you very much! However unfortunately it is still the same on mobile view. Could you please help me with the mobile view aswell?

 

Thank you in advance!

 

Mobile ViewMobile View

Hardik29418
Shopify Partner
2859 407 1073

This is an accepted solution.

@media only screen and (max-width: 750px) {
#shopify-section-16073694680066065f {
display: none;
}
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
sanderrisseeuw
Excursionist
17 0 5

@Hardik29418 

Thank you so much! Everything is working now!

Hardik29418
Shopify Partner
2859 407 1073

Thank you for update...

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
learner8
Tourist
9 0 2

Hi, I have tried this but it is still appearing.

my store name is www.southspotofficial.com

I want to have it so I can show a certain section in desktop view and a certain section in mobile view.

Hardik29418
Shopify Partner
2859 407 1073

@learner8 Which section do you want to show on desktop and hide on mobile view?

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
learner8
Tourist
9 0 2

I currently only have a section that I want to appear on desktop only because I didn't want to double up the sections. But it is the top section (image with text overlay)

Hardik29418
Shopify Partner
2859 407 1073

@learner8 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

 

@media only screen and (min-width: 600px) {
#shopify-section-1623749843a85551de {
display: none;
}
}

 

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
learner8
Tourist
9 0 2
This didn’t work unfortunately.
Hardik29418
Shopify Partner
2859 407 1073

I have changed some code. Please copy again.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
learner8
Tourist
9 0 2
Still isn’t working.
Hardik29418
Shopify Partner
2859 407 1073

@learner8 Let us connect via PM

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
BBBoutiquex
Visitor
2 0 0

I can't find theme.scss.liquid - is this because my theme is Craft? Could you please advise on how I could sort the same issue? I have a widget through Fera for reviews which looks alright on desktop but I want to stop it showing on mobile as the rest of the screen adapts to be smaller but the widget does not

Thank you

made4Uo
Shopify Partner
3804 713 1124

For future Shopify users that wants to hide the section in mobile, you do not need to find your section ID. Just follow along the tutorial below. No need to be a website guru. No APP and its totally FREE. 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!