Background Color Changes on Mobile

  • J Harris – 23 Machine

    (@23machine)


    2 days, 8 hours ago

    Hi Ben,

    I thought I saw a post on this a while back but now that I need it, I can’t find it. Ugh. Anyway, my site’s background color seems to change on mobile sizing. I’ve looked around in the colors sections and can’t find anything specific to mobile background colors, but I could be wrong. IS this somewhere in the Customize section or is this a CSS code snippet thing? Any guidance is appreciated.

    Joel

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Ben Sibley

    (@bensibley)

    2 days, 6 hours ago

    Hi Joel,

    Thanks for getting in touch about this.

    It looks like the background color is being changed with some custom CSS. The issue is that it is wrapped in a media query, which makes it apply only when the screen is 800px or wider.

    @media (min-width: 800px) {
        body, .main {
            background: #034053;
        }
    }

    You can change this by deleting the media query, leaving the code like this:

    body, .main {
      background: #034053;
    }
    Thread Starter J Harris – 23 Machine

    (@23machine)

    1 day, 7 hours ago

    When I look in my custom CSS I see I have a call that looks like this:

    @media all and (min-width: 800px) {
       .menu-primary-items,
       .menu-unset {
           text-align: center;
           clear: left;
           margin: 0 auto;
    }

    I tried replacing just the media all query with the body, .main tag you provided but it seemed to break some other things in the code below it. I know that this due to my lack of CSS syntax knowledge though. I tried replacing the whole thing but then it messes up my center-styled menu. Can you help put this in to the correct format? Thanks again!

    Theme Author Ben Sibley

    (@bensibley)

    1 day, 5 hours ago

    I see what’s happening. There is a missing } in your code, so the media query is staying open and affecting all the CSS that shows up below. If you add a } below the margin: 0 auto line, that should fix the issue.

Viewing 3 replies - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.