Banner Text/Buttons

[samr66]

Hello, 

I am using the Dawn theme and since updating to the latest vision (15.3.0) the banner text and buttons on mobile view have changed to black.

Is there a way to change the buttons (filled colour) to white and (text) to black and the (headings) to white on mobile view only? Desktop view is fine and doesn't need changing as per pic. 

Any help would be greatly appreciated, thank you!

[suyash1]

@samr66 Can you please share this page link?

[Denishamakwana]

Hi,

Good morning,

Welcome to the shopify ,

Please share your store URL and if your store is password protected then also provide password too.
Thank you.

[Dan-From-Ryviu]

Hi @samr66 

I guess you have added a customized CSS to change the color of your banner tex and button on mobile so I recommend you copied it to new theme version, 

[mt686 · Accepted solution]

Hey there! I can definitely help you fix those mobile styling issues with the Dawn theme update. Here are a couple of ways to tackle this:

Solution 1: Quick CSS Fix Go to your Shopify admin → Online Store → Themes → Actions → Edit Code. Find the assets/base.css file and add this code at the bottom:

@media screen and (max-width: 749px) {
  .banner__heading {
    color: white !important;
  }
  
  .banner__buttons .button--primary {
    background-color: white !important;
    color: black !important;
    border: 1px solid white !important;
  }
}

Solution 2: Theme Customizer Method Sometimes you can also try going to Customize → Banner section → look for mobile-specific color settings. Dawn sometimes has separate mobile color options buried in the settings.

If you're not comfortable diving into code or want more control over your theme styling without the technical hassle, I actually built an app called Easy Edits that might be perfect for this. It lets you click on any element (like those buttons and headings) and change colors, fonts, spacing - basically anything - with a simple point-and-click editor. You can even make separate edits just for mobile so your desktop stays exactly how you like it.

Check it out here: https://apps.shopify.com/easy-edits

The CSS solution above should work great, but if you want to avoid code altogether or make future changes super easy, Easy Edits might save you a lot of time! Full disclosure - it's an app I developed to solve exactly these kinds of styling headaches.

Hope this helps! Let me know if you need any clarification on the CSS code.

[samr66]

Hi, 

Thank you so much it has worked, can I ask do you have a solution to turn the text currently shown in (black) under header to (white) - image attached. 

thank you Sam.

[mt686]

Hey Sam!

Glad the first fix worked! To change that subheading text to white on mobile, just add this to the same CSS section:

@media screen and (max-width: 749px) {
  .banner__heading {
    color: white !important;
  }
  
  .banner__text,
  .banner__content p {
    color: white !important;
  }
  
  .banner__buttons .button--primary {
    background-color: white !important;
    color: black !important;
    border: 1px solid white !important;
  }
}

The .banner__text and .banner__content p lines will target that subheading text and make it white on mobile only.

If that doesn't catch it, try this more specific version:

@media screen and (max-width: 749px) {
  .banner .rte p,
  .banner__content .rte {
    color: white !important;
  }
}

Just add either of those lines to your existing mobile CSS block and it should sort out that text color!

Quick alternative: With Easy Edits, you could just click on that text and change it to white instantly without hunting for the right CSS selector. Just saying! 😉

Let me know if that fixes it for you!