How to Hide Sections on Mobile?

[bratslaps]

Hello, I'm trying to make this wave hidden on mobile. As you can see the wave is different on mobile, so I want to hide it only on mobile. So I can create a new wave for mobile only. 

 My website is www.bratslaps.com, this is the blog page.

[bratslaps]

https://bratslaps.com/

[asharofficial]

Hi @bratslaps 
I  didn't see any waves on the live site, you can do this with the help of CSS easily also you can change the image in the mobile version through media queries.

[bratslaps]

what are media queries? i don't know a thing about CSS so it's not so easy for me! Haha. the waves are live now, i forgot i was still editing

[asharofficial · Accepted solution]

here is the solution do these steps @bratslaps 

Steps to Add Custom CSS in Shopify

1. From your Shopify admin, go to Online Store > Themes.
2. Click Actions for the theme you want to edit, then select Edit code.
3. Find the base.css file under Assets (or whichever CSS file your theme uses).
4. Scroll to the bottom of the file and add the following CSS code:

@media (max-width: 768px) { /* Adjust the max-width for your mobile breakpoint */
    [class^="wave-body-template"] {
        display: none;
    }
}

Element hide on mobile

[bratslaps]

ah thank you so much! forgive me if stupid questions, but how do i find what my mobile breakpoint is to adjust it?

[asharofficial]

For mobile and tablets break points start from 768px

• 576px (small)
• 768px (medium)
• 992px (large)
• 1200px (extra-large)

[bratslaps]

thank you for your help, i see it disappeared now. thanks!!!

[asharofficial]

Let me know if you need any further assistance ❤️

[Dan-From-Ryviu]

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings.

@media (max-width: 749px) {
#shopify-section-template--18707655098593__image_banner_8CCDJj { display: none; }
}