[Resolved] Deactivate background image for mobile

[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

[David]

Hi there,

try adding this CSS:

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

[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

[David]

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

To cover all the tables change:

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

[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

[Leo]

Try adding this CSS:

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

[David]

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

And how can I change the padding for tablets?

[Leo]

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

[David]

Done!

[Leo]

So what is the issue here?

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

[David]

Ok, that looks all right.

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

[David]

Resolved

[Leo]

No problem 🙂

[Author]

Posts