How can I make a website section invisible on mobile?

Store Design

Topic summary

A user wants to hide a specific image banner section (titled “Make the change”) on their website’s mobile view while using the Dawn theme.

Proposed Solutions:

Multiple experts offered CSS-based approaches:

  • Method 1: Add CSS code to theme.liquid file before the </body> tag using a media query targeting the specific section ID
  • Method 2: Insert similar CSS into the base.css file in the Assets folder
  • Method 3: Use the theme customizer’s “Custom CSS” field within the section settings, replacing .addclassname with the actual class name found via browser inspect tool

Key Technical Details:

All solutions use @media screen and (max-width: 767px) or (max-width: 768px) to target mobile devices and apply display: none !important; to hide the section.

One user asked if these solutions could be adapted for the Origin Theme v11 to hide custom liquid sections on mobile.

The discussion remains open with no confirmed resolution from the original poster.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

I want the third section on my website (cardtag.co) which is an image banner with the header “Make the change.” to disappear on mobile. I am using the theme dawn.

Thanks in advance!

2

Hello @cardtag

You can add code by following these steps to hide section on mobile

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px) { #Banner-template--18538466345296__7e3ce54b-2be2-41a3-9fb6-9d754142806e { display: none !important; } }

techlyser_ecom_0-1681240203474.png
techlyser_ecom_0-1681240203474.png371×713 58.9 KB

3

Hi @cardtag

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

@media screen and (max-width: 767px) {
#Banner-template--18538466345296__7e3ce54b-2be2-41a3-9fb6-9d754142806e {
display: none !important;
}
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

4

Hi @cardtag

This is Manuel - From The Third Creative Media, You can try this solution:

Online Store ->Theme → Customize > Find the section that you want to hide

Click the section > On the right side scroll down and you’ll see “Custom CSS”

Add this code. You will replace “.addclassname” on the actually section class name

@media only screen and(max-width:768px){
.addclassname {
    display: none !important;
 }
}

To Find the Class Name:

On a separate tab open your website > Find the section you want to hide .

Right Click and Click Inspect > Hover your mouse on the section you want to hide.

Check on the Inspect tool and it will highlight which was hovered > find the class name.

Replace .addclassname on the actual class name of the section.

If the class name is too long copy only the first couple of words until there is a space.

Hope you find my answer helpful!

Best regards,

Manuel | The Third Creative Media

5

Hi Techlser,

Can you adapt this code for the Origin Theme v11? I am trying to make some custom liquid section disappear on mobile.

Thank you!