[Resolved] Deactivate background image for mobile

Home Forums Support Deactivate background image for mobile

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1362932
    David

    Hey there!

    I would like to deactivate the background image only for mobile devices.
    On the mobile version of my website you can only see a little stripe of the background image between every block (e.g. the container or widget block), which doesn´t look great. I would like to have no background on mobile devices.
    How can you do this?

    Many thanks
    David

    #1363110
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS:

    @media (max-width: 768px) {
        body {
            background-image: none;
        }
    }
    #1364253
    David

    Hey!

    This is working so far – thanks!

    But there is still a “stripe” between the containers in the background colour now. Can you deactivate this space between the containers only for mobile completely?

    And which width do we need to choose if would like to have the same settings for tablets?

    Thank you so much!
    David

    #1364291
    David
    Staff
    Customer Support

    Go to Customizer > Colors > Body and set the Background to #ffffff

    To cover all the tables change:

    (max-width: 768px) to (max-width: 1024px)

    #1364572
    David

    Fine, thank you!
    As there was still a little space between the menu header and the heading of the articles, I changed the padding in the customizer for mobile phones to 0. But there is no button to change the padding for tablets. How can I change the padding for tablets?

    I also deactivated the sidebar widgets with


    @media
    (max-width: 1024px) {
    .sidebar {
    display: none;
    }
    }

    For mobile phones it works fine, but on tablets there is just a big white space where the widgets used to be. Can I fill the whole display with my text on tablets?

    Thank you so much!
    David

    #1364608
    Leo
    Staff
    Customer Support

    Try adding this CSS:

    @media (max-width: 1024px) and (min-width: 768px) {
        .content-area.tablet-grid-75 {
            width: 100%;
        }
    }
    #1364626
    David

    Yep, it´s working. Thank you :)!

    And how can I change the padding for tablets?

    #1364778
    Leo
    Staff
    Customer Support

    Can you disable the caching plugin so I can take a closer look at the code?

    #1364888
    David

    Done!

    #1364903
    Leo
    Staff
    Customer Support

    So what is the issue here?

    I used Chrome simulator to preview iPad and not seeing anything obvious:
    https://www.screencast.com/t/AoW3VLp9vBR

    #1364970
    David

    Ok, that looks all right.

    Yeah, I see, it´s working. Thank you so much for your help :)!

    #1364971
    David

    Resolved

    #1365006
    Leo
    Staff
    Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.