Different background for desktop and mobile?


#1

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


Custom class to enable / disable background between views
#2

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


#3

Thank you! I will give it a shot.


#4

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


#5

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


#6

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


#7

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.


#8

@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.


#9

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


#10

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


#11

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: