Shopify themes, liquid, logos, and UX
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:
Solved! Go to the solution
This is an accepted solution.
Hi @arutze ,
Try this.
@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.
This is an accepted solution.
Hi @arutze ,
Try this.
@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.
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?
Oh I didnt touch that one.
.banner__buttons a {
background: black;
}
Result:
thank youuu!!!
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.
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.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025