Different background for desktop and mobile?

Hello,

I have a website, www.markettheory.com , It looks fine on desktop, but in mobile her parallalax effect doesn’t work so it looks odd.

Is there a way to create a separate mobile site? Or select a different option for background on mobile and tablet?

Any help is much appreciated.

Thanks in advance!

Helder

Create duplicate blocks for desktop and mobile and toggle their visibility appropriately using the visibility control in the sidebar.

Thank you! I will give it a shot.

@hbc
I had to do that on a background image (blue island) on my site.
Very straightforward.
www.apswoodwork.uk
Andy

You can also switch the bloc background on mobile using a custom class.

1 Like

what class?
I am adding a custom class called custom-background

then adding a background under desktop view
then with the same class, removing the background in mobile…

BUT
it then removes the background for all views

Its because you are removing the background rather than changing it. I’ll need to tweak the class editor to handle that. I’ll see if I can get that in for 2.4.1.

In the meantime setting a 1x1px png on mobile will give you the desired effect.

1 Like

@Nzfudge Hi,

You could use a class to load a bg image for desktop and tablet and then for mobile change the the image to a small transparent png (it can even be as small as 1x1px) and set the background colour to what you want.

4 Likes

BRILLIANT!!! Thank you :slight_smile: @Jakerlund - much appreicated

1 Like

Another work around is to create a seperate bloc just for mobile. Hide the mobile view on the desktop/tablet bloc and then hide desktop/tablet view on the mobile bloc.

Casey

You have save me a lot of changing css file. Because 2 people editing the site. And i did a css hack for mobile version. I just wrote new lines. But every time somebody exports the pages. It will be rewritten. So this solution is really fine. In my case i wanted to remove the background on mobile, and with transparent 1 px bg it works :smiley:

thanks :smiley: