Removing Buttons on Image Banner on Mobile - Dawn Theme

Store Design

Topic summary

Goal: Hide image-banner buttons on mobile in the Dawn theme.

What happened:

  • Several CSS snippets using mobile media queries were suggested and added to base.css (and similar), e.g., hiding .banner__content on screens ≤600–749px and layout tweaks to better fit the banner on mobile.
  • In the Shopify theme editor’s mobile preview, the buttons disappeared, but on actual iPhones (iPhone 13 Pro and an older iPhone), the buttons still showed, suggesting the rules weren’t applied live (likely file/scope precedence or caching rather than code syntax).
  • An alternative approach proposed improving banner layout instead of removing buttons.

Key technical detail:

  • CSS media queries target small screens (e.g., max-width: 600–749px) to conditionally hide or reposition banner elements.

Resolution/outcome:

  • Moving the CSS to the asset file specifically for the banner (assets/section.image.banner.css) and placing it at the bottom made the change take effect on iPhones.
  • Final takeaway: For Dawn, place mobile-specific banner overrides in section.image.banner.css (not just base.css) to ensure they apply on mobile devices.

Status: Resolved.

Summarized with AI on January 13. AI used: gpt-5.
1

Hello, I am trying to remove the image banner buttons from the mobile site. They are in a good position on Desktop,but on mobile they come before the image. Looking for help to remove from mobile. Thanks!

Here’s my site so you can look www.maderadesignstudio.com I tried to attach images but it won’t allow that/ Thanks!

1 Like
2

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find base.css file
@media only screen and (max-width: 600px) {
.banner__content.banner__content--bottom-right.page-width.scroll-trigger.animate--slide-in {
    display: none !important;
}
}
3

Hello, Thanks for the super fast response. I added that code at the bottom of base.css – in the Shopify editor it shows that the buttons are gone, but on my Iphone they still appear. I cleared the cache on my ipone, can you have a look and see if you see the buttons live? Thanks a ton! - Stacey

4

Hi @StaceyS

Do you really like to remove theme? Or maybe this one will be good idea?

Made4uoRibe_1-1700060660343.png
Made4uoRibe_1-1700060660343.png597×745 423 KB

The size of your banner in mobile are not fitted well. So I fixed a bit.

I used this codes.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
.banner--content-align-mobile-right .banner__box {
    background: transparent !important;
    text-align: center !important;
}
.banner__content.banner__content--bottom-right.page-width.scroll-trigger.animate--slide-in {
    position: absolute;
    top: 5px;
}
.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media, .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media {
    height: 100vw !important;
}
}
  • And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

Oh to remove the buttons. Check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
.banner__content.banner__content--bottom-right.page-width.scroll-trigger.animate--slide-in {
    display: none;
}
.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media, .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media {
    height: 100vw !important;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

6

check this code

@media only screen and (max-width: 600px) {
.banner__content.banner__content--bottom-right.page-width.scroll-trigger.animate--slide-in {
    display: none !important;
    visibility:hidden !important;
}
}
7

Hi. This is the same. In the shopify dashboard in mobile view, it’s not there, yet on my phone it’s still there. Did you see it on your phone? Thanks.

8

I tried this, it also works on the shopify site, but not on my iphone. It still shows on my phone??

9

it is iphone or ipad?

Made4uoRibe_0-1700062792409.png
Made4uoRibe_0-1700062792409.png542×656 232 KB

10

I’m on an Iphone 13Pro . I also checked on a friends older iphone both show the buttons.

11

Can check this code, again if its working on iphone? Thanks!

@media only screen and (max-width: 749px){
.banner--stacked .banner__box {
    display: none !important;
}
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
12

Hi. Just replaced old code with this. It doesn’t work on my iphone, I still see the buttons. Have you looked on your phone? Do you see them on mobile? Thanks for your help.

13

I have the idea to take your code and paste it inside assets > Section.image.banner at the bottom and it worked!! Thanks.

14

Good to hear that! Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

15

Be sure to post this code into the assets — section.image.banner.css at the bottom. Then it works.