Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1173707

    I need to hide background images on mobile devices because the images are too big. I found this code on your support site:

    @media only screen and (max-width: 767px) {
    #top #section-mobile-bg {
    background: none !important;
    }

    and to test two sections of my page, I updated it to:
    @media only screen and (max-width: 767px) {
    #leadership #constitutional {
    background: none !important;
    }

    But this code forced my website width to 767 on a dekstop screen and didn’t remove images on a mobile screen. Also, I would like to expand the code to include a color replacement so it is not default white. Example #f8f8f8

    #1173711

    apologies, but the code is actually below, I forgot my page call out.

    .page-id-824 @media only screen and (max-width: 767px) {
    #leadership #constitutional {
    background: none !important;
    }

    #1173843

    Hi,

    Thanks for the update, so everything is working as it should now then?

    Best regards,
    Rikard

    #1175188

    no, not yet. I can’t see any changes on my phone for “fixed” background images.

    This is the code for my parallax images and I see changes on my cellphone
    @media only screen and (max-width: 989px) {
    #leadership .av-parallax .av-parallax-inner, #constitutional .av-parallax .av-parallax-inner, #instructor .av-parallax .av-parallax-inner, #case-management .av-parallax .av-parallax-inner {
    background-image: none !important;
    }
    }

    The one for “fixed images” do not work

    @media only screen and (max-width: 989px) {
    #organizational, #report, #organizational {
    background-image: none !important;
    }
    }

    #1175332

    Hi,
    For the remaining background images on the page, please try this css:

    @media only screen and (max-width: 767px) {
    .page-id-824 #wellness .av-parallax,.page-id-824 #report .av-parallax,.page-id-824 #organizational .av-parallax {
        background-image: none !important;
        background-color: #f8f8f8 !important; 
    }
    }

    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

    #1175622

    that worked perfectly, all is in order

    #1175654

    Hi leahmessina,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Help with CSS for hiding background Images’ is closed to new replies.