Mobile website doesn't adopt the same colours as desktop dawn theme

Hello all,

Maybe this is an easy fix however I am not able to figure out how to make it work.

My desktop website has all the correct colours for the buttons and main font. Dark red for the button as well as black for the main title inside the image.

However, when I visit the website from a mobile the button turns white as well as the font but the colour settings remain the same.

Website: www.defkalionjewelry.com

Thank you all in advance!

Hi [email removed]Defkalion,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file basecss,

Step 3: Paste the below code at bottom of the file → Save

@media(max-width:767px){
:root{
--color-button: 166,8,8;
--color-button-text: 255,255,255;
}
}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

Thank you so much for your reply however this hasn’t done the trick. I added it at the bottom of the file however it didn’t work. Can you also add the code which will make the header text black instead of white ?

Thank you !

yes, I checked and I see that code but it conflicts with the theme.
you can add it again

@media(max-width:767px){
:root, .color-background-1 {
     --color-foreground: var(--color-base-text) !important;
    --color-button: var(--color-base-accent-1) !important;
    --color-button-text: var(--color-base-solid-button-labels) !important;
}
}

Great thank you! Works perfectly!

Great! I’m glad that it works perfectly on your end :blush: