Change background to solid color only on mobile

  • Resolved mikeda1da

    (@mikeda1da)


    8 years, 6 months ago

    I’m having an issue where the background image used for the parallax on the desktop site repeats itself vertically all the way down my one-page website when I’m on my iPhone. Instead of trying to fix that, I’d rather go with the simple fix of having a solid color as the background, but only on mobile devices. I got a custom CSS started, but I’m not very proficient in programming and it doesn’t work.
    Where am I going wrong?

    @media only screen and (max-width: 1100px) {
    background-color: #ffffff !important;
    }

    Thanks,

    Michael

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

  • You need to define a class that you want the background color change to apply to.

    @media only screen and (max-width: 1100px) {
     .classname {
          background-color: #fff;
     }
}

    Replace classname with the element you wish to modify.

    Hope this helps.

    Thread Starter mikeda1da

    (@mikeda1da)

    Thank you for replying!

    I was able to change the background color of section 1, but I’ve tried almost every possible classname for the other sections and sadly none of them work. The site is impact.ufaed.org.

    Thank you again for your help,

    Michael

    You can right-click any area of your theme and select the Inspect Element option (or simply Inspect). This will open a new window showing you the structure of your code.

    You can highlight any element to view the CSS that is being applied to that element, you can obtain any CSS class name using this method. You can also collapse/expand this code structure using the small arrows alongside each parent element.

    For example, the About section can be referenced like so:

    #about {
    background: #f00;
}

    You can also remove the unwanted gaps that are showing with this:

    section.home-section-1 {
    padding: 0; 
}

    You can place these codes within the media queries as needed.

    Hope this helps.

    Thread Starter mikeda1da

    (@mikeda1da)

    You are a life saver!! Thank you so much!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Change background to solid color only on mobile’ is closed to new replies.