Okay. So i got this. Let me guide you through this.
So open your code editor and for any section that you want this feature in to hide or show section on specific devices, follow these steps.
I tried this on rich-text section. So on the code editor i opened rich-text.liquid file and coded these under section settings.
So just after settings: [ paste this code
{
“type”: “checkbox”,
“label”: “Hide Section on Desktop”,
“id”: “hide-on-desktop”,
“default”:false
},
{
“type”: “checkbox”,
“label”: “Hide Section on Mobile”,
“id”: “hide-on-mobile”,
“default”:false
},
This will give you an option like this
Secondly at the top of your section under stylesheet tag add this
For desktop
{% if section.settings.hide-on-desktop %}
.section-{{section.id}}{
display:none;
}
{% endif %}
{% if section.settings.hide-on-desktop == false %}
.section-{{section.id}}{
display:block;
}
{% endif %}
For mobile
@media screen and (max-width: 767px){
{% if section.settings.hide-on-mobile %}
.section-{{section.id}}{
display:none;
}
{% endif %}
{% if section.settings.hide-on-mobile == false %}
.section-{{section.id}}{
display:block;
}
{% endif %}
}
Also in the section container add this under the classes section-{{section.id}}
This should do it. I hope i was able to explain. Things get tough when explaining like this. if you get it fine, if not you can try reaching out to me by email and i shall guide you through on a call. Or you can get me a collaborator access and tell me the sections you want this for and i shall do it for you.