Slideshow colours change from desktop to phone in the Refresh Theme

[Jeremiah101]

As you can see in the pictures above the background and the colors change whenever I switch from desktop to phone.

Could you tell me how to keep the same background even when a customer of mine changes from desktop to phone and vice versa?

I could use some CSS help, just tell me what code to use and where should I insert it.

I really appreciate it!

Jeremiah.

[Made4uo-Ribe]

Hi @Jeremiah101 ,

You can use the media query, Would you midn to share your URL website? with password if its protected? Thanks!

[Zqdo]

Glad to help. Can you send over the link to your website so I can take a look?

[Jeremiah101]

Absolutely, here it is: https://deutschwise.myshopify.com

There’s no password!

Thank you for your help Ribe_Dagandara

[Jeremiah101]

Absolutely, here it is: https://deutschwise.myshopify.com

Thank you for your help as well!

[Made4uo-Ribe]

Thank you for the information. Just like to clarify which color youll like to keep? the transparent or the blue one?

[Made4uo-Ribe]

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.

.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-scheme-132bc634-6167-4efc-9364-e89868d78087.gradient.slideshow__text--left.slideshow__text-mobile--left {
    background: transparent;
}

This is for the desktop to be transparent same with mobile. Result:

@media only screen and (max-width: 749px){
.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-scheme-132bc634-6167-4efc-9364-e89868d78087.gradient.slideshow__text--left.slideshow__text-mobile--left {
    background: var(--gradient-background);
    background-attachment: fixed;
    border-radius: var(--text-boxes-radius);
    border: var(--text-boxes-border-width) solid rgba(var(--color-foreground),var(--text-boxes-border-opacity));
}
}

This is for the mobile to change in blue background. Result:

I hope it help.

[Jeremiah101]

It worked indeed, thank you for your great help.

Is there any way I could also edit the font-size of the texts in the same background in mobile version, as they all seem to be condensed, I decreased the padding by setting “padding: 0;” but how about the font size of the texts and the button please?

If it isn’t possible then I think decreasing the max-width of the whole div of the background might also be a great solution!

Much appreciated for the help!

[Made4uo-Ribe]

Yes, we can change the sizes of the font also the button fonts.

Try this one.

.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-scheme-132bc634-6167-4efc-9364-e89868d78087.gradient.slideshow__text--left.slideshow__text-mobile--left h2 {
    font-size: 30px;
}

This is for the text.

.banner__buttons a {
    font-size: 20px;
}

And this is for buttons.

Result: