Change text color based on platform (desktop and mobile)

Shopify Discussion

Topic summary

Customizing Ride 11.0.0 slideshow text to differ by device: black, left-aligned on desktop; white, no container, bottom-center on mobile.

Key steps provided after store URL was shared:

  • Edit theme CSS (Online Store > Themes > Edit code > Assets > base.css/theme.css).
  • Add a mobile-only media query (max-width: 749px) targeting the slideshow text container selector to set all text color to white.
  • Add another rule in the same media query to adjust spacing (padding-top: 33%, padding-bottom: 0) so the text sits toward the bottom and centers on mobile.

Updates and outcomes:

  • The first CSS change successfully made mobile slideshow text white; desktop remained unchanged (effectively preserving black on desktop).
  • The second CSS change positioned the text at the bottom center on mobile as requested.
  • Screenshots were shared to demonstrate the results.

Status:

  • The solution worked and the request appears resolved. No conflicting opinions or remaining open questions were noted.
Summarized with AI on January 23. AI used: gpt-5.
1

I am using the Ride theme 11.0.0, I have. Slideshow and I was wondering if I can have the text/heading colour to be black on the desktop version in a left aligned container, whilst having the mobile version to be in white with not container and bottom Center aligned.

1 Like
2

@Alhantoubi99 , Hope you are doing well.

Could you please share your store URL?

3

Hi @Alhantoubi99 ,

Would you mind to share your URL website? with password if its protected. Thanks!

4

Here you go: https://fleura-5661.myshopify.com/?_ab=0&_fd=0&_sc=1

5

Here is my store link: https://fleura-5661.myshopify.com/?_ab=0&_fd=0&_sc=1

1 Like
6

Thank you for the information. Try this one.

  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, style.css or theme.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) {
    .slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient.slideshow__text--center.slideshow__text-mobile--center * {
    color: white;
}
}

Result:

Ribe_Dagandara_0-1690572678700.png
Ribe_Dagandara_0-1690572678700.png724Ă—317 199 KB

i hope it help.

1 Like
7

Amazing this worked, if it’s not a hassle would you help me centralize the text and header to the bottom center on the mobile version only. Thank you, your amazing

1 Like
8

Try this one.

Same Instruction.

@media only screen and (max-width: 749px){
.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient.slideshow__text--center.slideshow__text-mobile--center {
    padding-top: 33%;
    padding-bottom: 0px;
}
}

Result:

Ribe_Dagandara_0-1690574644015.png
Ribe_Dagandara_0-1690574644015.png638Ă—442 207 KB

I hope it help.

1 Like