I want to have different color schemes for mobile and desktop on slideshow container content

[njMaydan]

Hello everyone,

I'm using Refresh theme, and in slideshow section I would like to have separate options for desktop color scheme and mobile color scheme.

On desktop I would like to have like this Accent-1 color scheme and it will fit in perfectly, but when I select accent-1 scheme it automatically sets that scheme to mobile too, where is not looking good, and I would like on mobile to be background-1 scheme, that fits very good.

Look, there is accent-1 automatically, and I would like to be background-1 on mobile.

If anyone could help, thanks a lot.

[RThomasDesign]

You are likely going to have to use CSS and media queries -- and edit the CSS files directly. 

[njMaydan]

Than you @RThomasDesign for answer,

Yes, i know that, but i don't know where exactly i need to put a code. I don't know also what exactly to put inside media query of max-width: 749, what property i need to change to connect color scheme to specific part of section?

[made4Uo]

Hi @njMaydan,

You can have separate section for desktop and for mobile. You try to follow the video below

[njMaydan]

Thank you @made4Uo ,

Very helpful video, but can that way be harmful for the site in some way, maybe increasing site response time or problem with graphic?

I can add option in mobile layout section to choose color scheme but i don't know how to connect that chosen scheme option to slideshow container in media query max-height:749

[made4Uo]

Hi @njMaydan 

I cannot think of anyway that this can be harmful. We do not use javascript on this. It is merely transforming your section

[AliReviews]

Hello @njMaydan ,

You can try to do this:

• Go to Online Store -> Theme -> Customize -> Slideshow -> Slideshow container content
• Under "Slideshow container content," you'll see an option called "Text color." Choose the color you want for the desktop version of your site.
• Click on the "Additional CSS" section in the left-hand panel and add the following code

@media only screen and (max-width: 767px) {
  .slideshow__content {
    color: #FF0000; /* replace with your desired color for mobile */
  }
}

• You can add more CSS code to target other screen sizes and set different colors as needed.

Hope this can help.

Ali Reviews team.