How to change image banner Heading color on Mobile only

Solved

How to change image banner Heading color on Mobile only

arutze
Explorer
47 0 18

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: IMG_8091.jpg 

 

Screenshot 2023-06-29 at 18.04.29.png

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
6827 1630 2009

This is an 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:

Ribe_Dagandara_0-1688057035947.png

I hope it help. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 6 (6)

Made4uo-Ribe
Shopify Partner
6827 1630 2009

This is an 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:

Ribe_Dagandara_0-1688057035947.png

I hope it help. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
arutze
Explorer
47 0 18

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?

Screenshot 2023-06-29 at 18.54.14.png

Made4uo-Ribe
Shopify Partner
6827 1630 2009

Oh I didnt touch that one. 

.banner__buttons a {
    background: black;
}

Result:

Ribe_Dagandara_0-1688058025268.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
arutze
Explorer
47 0 18

thank youuu!!!

harry_alxx
Visitor
1 0 0

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
Tourist
17 0 1

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.

 

IMG_2052.jpg