SOLVED

Shopify Discussion

Topic summary

A Shopify store owner is troubleshooting CSS code for background and text colors that stopped working on mobile devices (Safari specifically).

The issue involves the .color-scheme-1.gradient and #MainContent selectors with colors #fff2de (background) and #7c715b (text).

Current situation:

  • The CSS previously worked correctly
  • After making changes, the background color no longer applies on mobile
  • Desktop display appears unaffected

Technical details:

  • Code includes media query targeting screens max-width 767px
  • Uses !important declarations
  • CSS is pasted into base.css file

The thread is marked as SOLVED, suggesting a resolution was found, though the solution details are not clearly visible in the provided text (some content appears corrupted or encoded).

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

/* Ensure the background and text color apply across all devices */
.color-scheme-1.gradient, #MainContent {
background-color: #fff2de !important;
color: #7c715b !important;
}

/* Additional specificity to target mobile devices */
@media only screen and (max-width: 767px) {
.color-scheme-1.gradient, #MainContent {
background-color: #fff2de !important;
color: #7c715b !important;
}

This is the current code i have pasted into base.css

Code worked before i mustve went in and messed something up but background is no longer applied on mobile when looking on safari

www.sippinonsunshine.net

code: anna