How can I hide custom liquid sections on mobile in the Dawn theme?

[urbantis]

Hi, I would like to hide  custom liquid sections from mobile (roses with new arrivals words)

Can you please help?

Website: https://rayeofhope.com/

password Tristin0805

Thanks

[marcoswata]

In the theme editor, go to /sections/custom-liquid.liquid

Find the  line with

"settings": [

And below that paste:

{"type":"checkbox", "id":"mobile_hide", "label":"Hide on mobile", "default":true}

Then find the line with:

<div class="color-{{ section.settings.color_scheme }} gradient">

And replace it with:

<div class="color-{{ section.settings.color_scheme }} gradient {% if section.settings.mobile_hide != blank %} small-hide{% endif %}">

[urbantis]

Thank you, when I add {"type":"checkbox", "id":"mobile_hide", "label":"Hide on mobile", "default":true}

under setting I get

error saving sections/custom-liquid.liquid

However I would like to hide a specific custom.liquid. not all of them, please let me know if you have time, thanks

[marcoswata]

@urbantis with my solution you should be able to hide specific custom Liquid sections, not just that specific one.
Sorry I forgot you need to add a comma after the setting.
So:

{"type":"checkbox", "id":"mobile_hide", "label":"Hide on mobile", "default":true},

[suyash1]

@urbantis - add this css to the very end of your base.css file and check

@media screen and (max-width:749px){
shopify-section-template--15701762998467__7a98d4cb-9e18-4394-8c8d-88719a04ea9c{
    display: none;    visibility: hidden;}
}

[urbantis]

I tried this adding is at the bottom of base.css but it does not hide the section, what am I doing wrong?

[suyash1 · Accepted solution]

@urbantis - sorry my mistake, did not put # before id, so please remove that line and use this

@media screen and (max-width:749px){
#shopify-section-template--15701762998467__7a98d4cb-9e18-4394-8c8d-88719a04ea9c{
    display: none;    visibility: hidden;}
}

[urbantis]

Brilliant, thank you