How to change image banner Heading color on Mobile only

[arutze]

Hi, I want to change Heading color only on Mobile but keep the desktop one as it is. I want to make the font in Black and background in white but keep the Shop all button in white font with black background, see the example:  

 

[Made4uo-Ribe · Accepted solution]

Hi @arutze ,

Try this. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.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:
4. And Save.

@media only screen and (max-width: 749px){
.banner__box.content-container.content-container--full-width-mobile.color-inverse.gradient {
    background: white;
}
h2.banner__heading.inline-richtext.h1 {
    color: black;
}
}

Result:

I hope it help. 

[arutze]

Hi Ribe, 

Thanks a lot for your help, it worked but the button is not in black but rather dark blue, can I make it black like in the example I shared?

[Made4uo-Ribe]

Oh I didnt touch that one. 

.banner__buttons a {
    background: black;
}

Result:

[arutze]

thank youuu!!!

[harry_alxx]

To change the image banner heading color on mobile devices only, you can use CSS media queries to target specific screen sizes. Here's an example of how you can achieve this:

HTML:

<div class="banner">
<h1 class="heading">Your Heading Text</h1>
<img src="banner-image.jpg" alt="Banner Image">
</div>

CSS:

.banner {
position: relative;
}

.heading {
color: blue; /* Default heading color */
}

/* Media query for mobile devices */
@media (max-width: 767px) {
.heading {
color: red; /* Heading color on mobile devices */
}
}

In this example, we have a banner container with a heading (<h1>) and an image. By default, the heading color is set to blue. However, within the media query, which targets screens with a maximum width of 767 pixels (typical for mobile devices), the heading color is changed to red.

Adjust the colors and screen width in the CSS code as per your requirements. This way, the heading color will change only on mobile devices, while remaining unchanged on larger screens.

[tallowbar]

This worked for me too but how can i change the second line of text to the black also? I tried adding another line in code for the "text" section but doesn't work.