Responsive Padding and Margins

Hey there!

I’m developing a site with your plugin and am having an issue with the padding and margins once the website reaches the medium and small break points.

Essentially I have the margins and paddings just as I like it on desktop, but once it hits the smaller breakpoints, the margins and paddings for rows and columns essentially disappear. Obviously this isn’t ideal.

I’m sure there is an easy CSS solution I’m not thinking about, but for some reason I can’t figure out how to stop this behavior. Under tools I have paddings and margins set at zero. I then have manually entered padding and margins per row and / or module in order to replicate the website design.

If you’d like to view the site, I can send an email privately.

Thanks!

Hey Desmond,

Great to hear from you and hope all has been well! Sure, we’ll take a look if you would like to share the site URL. It may even help to have temp admin access in the event there is something we see quick to fix it.

Best,
Billy

[Content Hidden]

Hey Desmond,

It’s good to hear from you and I’m happy to see you’re still using the builder!

This is an interesting use case. The issue is that we’re zeroing out padding and margins for rows and columns and reseting to the defaults for modules. This is in a effort to “automate” the spacing in the responsive layout as we’ve found the spacing in the desktop layout doesn’t always work well in the responsive layout. For example, a 100px left margin on a module wouldn’t make sense on mobile but it could in the desktop layout.

I’ve been pondering this and trying to come up with a solution that would work well for someone that wants to zero out everything. I think that will probably be a setting in the global settings under responsive layout called “Auto Spacing” which would allow you to disable our CSS for that. I need a little bit more time to think about this. I’ll let you know what I come up with.

Thanks,
Justin

Hi Justin,

Great to hear from you as well.

I understand your reasoning behind “zeroing out” margins and paddings since it would be hard to account for a user’s spacing on mobile devices.

I think ideally it would be great to be able to select, per breakpoint, specific margins and padding, per module. I imagine a drop-down menu where within a module, you can select the medium breakpoint (for example), and then appearing below would be the standard padding and margin fields.

I’m interested in what you come up with. In my case, I think at the very least, the ability to negate the “zeroing out” of margins and paddings could help. I would then just need to create css for each module and breakpoint and apply it (sounds like a pain!).

If there is a chance to come up with anything by tomorrow morning, I’d greatly appreciate it. I need to show the site to our client and have promised that mobile views would be looked at.

Thanks for your help and congratulations on the new branding.

  • Desmond

Thanks, Desmond!

I think adding per breakpoint margins and padding might be more settings than we would like to have, but I’ll discuss with the guys.

Tomorrow morning is a bit tight for releasing a new feature but I can get you a patched version that doesn’t have the “zeroing out” code for now. I’ll shoot you an email with that.

Justin

[Content Hidden]

Hi,

Sorry for bumping an old thread, but I think I have the same issue. Specifically, I have an image that is cut-off at the halfway point and sits flush at the bottom of the column (so it has that ‘peeking out’ effect.) But when the browser is resized to a small size, the image moves upwards and creates white space underneath it.

I was wondering if there was a solution for this as yet?

Hi Matt,

We did add a way to disable Auto Spacing under Tools > Global Settings > Responsive Layout > Enable Auto Spacing. Give that a shot, and if that isn’t what you need, post a link to the page in question and we’ll have a look.

Thanks,
Justin