Hi there, sorry for the newb question but I have a landing page with an element containing a ‘subscribe’ form. The background in this element is an image, which displays perfectly on a desktop, but horribly in tablet and mobile modes.
My question is, can you specify a different element background across different device types? If so, how do I do this? Thanks!!
It is probably just a matter of container/image settings. Can you show screenshots of how it looks on each device?
Thanks so much Barbara, below are the desktop, tablet and mobile views. When I make an element invisible in mobile view, and add a new element, it kind of ‘pushes down’ the existing container.
Hey mooing Panda,
Could you give me the Website ID? I like to check on some style settings 
Thanks so much Andre, I thnk my website ID is 1320848, it’s attached to my cpanel in my domain/host. Login , www.thegoodestboy.com.au thanks so much again!
That’s a big problem I had before in a banner for different viewports. It ended in creating several banners and make them visible just on the particular viewport. It woul be great if Sitejet wouls be able to set a different background image for each vierport. I think I have a related featgure request cooking on.
Anyhow, in your example in the mobile view of our background picture is nearly completely coverd by the form container… this means displaying another picture just for mobile wouldn’t be a game changer.
Hey there,
So usually most of our presets and elements are responsive. If there is an unwanted or not fitting behavior, the reason is usually any kind of value or content that makes it maybe look good on desktop but once the space is shrinking for a viewport, that does not work as intended anymore.
So there need to be made adjustments. For that, there are several ways to adjust presets and even make them invisible for certain viewports and rebuild them so they fit in the smaller space.
While the feature request to add different pictures for each viewport is a great idea, it would not fix your issue here.
In your case, I see that you might have chosen one of the templates with an older preset that might be not what you are looking for.
Also, I can see a padding on the preset of 2,5 rem. It works fine on desktop. Setting the 2,5 to 1 rem in tablet would fix it for tablet but then make it not great for desktop again.
The contact form has a padding as well which of course disrupts the mobile view
The handling of the preset is a bit… let’s say inconvenient. Upon diving in deeper it seems you have used a template and then removed everything and added a new form, right?
My assumption here is, that this might have disrupted what you like to achieve. The most important discovery though is that the background with the waves will not work as you like it on mobile unless you add very small text into it.
This could be a compromise:
You could also set this setting on the left here:
… to contain on desktop and tablet and to cover on mobile.
Does this help?
