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.
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.
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
here is the solution do these steps @bratslaps
Steps to Add Custom CSS in Shopify1. From your Shopify admin, go to Online Store > Themes.
- Click Actions for the theme you want to edit, then select Edit code.
- Find the base.css file under Assets (or whichever CSS file your theme uses).
- 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
ah thank you so much! forgive me if stupid questions, but how do i find what my mobile breakpoint is to adjust it?
For mobile and tablets break points start from 768px
- 576px (small)
- 768px (medium)
- 992px (large)
- 1200px (extra-large)
1 Like
thank you for your help, i see it disappeared now. thanks!!!
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; }
}
Let me know if you need any further assistance 
1 Like