Change margin / padding for mobile devices

Hi,

I’m new to web design and have no programming qualifications. So far, I’m doing good according to my former standards :slight_smile:

That’s the temporary website I’m talking about:

I built this site with Page Builder on Sydney. Since a couple of updates ago, every full-width-content embedded within a widget of Page Builder is given a margin when going on a cell phone. Tablet is fine so far. You can check this with the site above.

There is no check box, no button, no feature that allows me a global “deactivate mobile margin”. something like that existed in the past and vanished with an update. Same here:

Like on a desktop browser, the films should be in full width on a mobile device. And they were at the beginning.

In Page Builder I specifically set mobile padding to 0px. This problem occurs only with the Sydney template.

I set up a test site with Astrid and a pre-built Page Builder layout. When going mobile, you’ll see the pics reaching accross the whole screen:
http://zugzwang.macadamiafilm.de/testseite/

Is there a CSS to eliminate this?

Thanks a lot. If you need more info, let me know…

Hello there,

The background image should be attached to the row instead of widget. To set row background image, Edit Row > Row Styles > Design > Background Image.

Regards,
Kharis

Hi Kharis,

thanks. when the image is attached to the row it automatically has a parallax effect. the fixed background image works only when attached to the widget.

What makes me curious is the fact, that it works with all themes I’ve tested, except with Sydney.

I just changed the attributes. Here’s a draft with the background image attached to the row (above) and to the widget (below). Parallax effect cannot be deactivated.

http://gliese.macadamiafilm.de/handlung-2/

Hello there,

To disable parallax, edit row, in the Row Styles section, expand the Attributes tab. In the Row Class input field, enter a custom class name e.g. disable-parallax

Then apply the following CSS code into your site’s additional CSS option which resides under the Appearance > Customize > Additional CSS.


.disable-parallax {
  background-attachment: scroll !important;
  background-position: top center !important;
}

Regards,
Kharis

Thanks Kharis,

the CSS works fine, but is not the effect I was looking for. I want the picture not to scroll away like content, but to be a FIXED background. the white band with the text is supposed to scroll over the picture.

e.g the template Astrid features the same options for the background image of a widget and a row. I can specifically choose it to be fixed or parallaxed or, like your CSS to scroll with the content.

I could go wth Astrid instead, but I need the Header-Slider-Features of Sydney :-/

GOT IT: I just needed the background-attachment in the CSS to be FIXED instead of SCROLL.

Thanks a lot. Works for me :slight_smile: