Dynamic margins based on screen width?


(Greg Schneck) #1

I know you can set percentages for margins (Flexible fill mode) but is there any way to set a dynamic margin based on screen width? I’m referring to the percentage of margin changing. The wider the screen the higher percentage of margin.

The result I’m looking for is no margin on phones (zero percent) and larger margins as screen widens (25% margin on wide screen.)

Any Stacks3 stack to do this? CSS?

I know this could be done with break points… but is it possible dynamically across variable widths?


(Rob D) #2

This is something I would like to know, as well… If it’s not possible as of now, it sure would be very desirable in some future update of Stacks.


(Lisa Sandler) #3

Sections Pro does what you are asking, I think? https://www.bigwhiteduck.com/stacks/sectionspro/
@tav


(Rob D) #4

It’s very praiseworthy that Tav addressed that on his end, but I think this should be a standard feature of Stacks in general, because breakpoints are not very accurate and reliable and they vary from one device to another (of the same kind).


(Joe Workman) #5

The standard Foundation Column stacks support this as well.


(Greg Schneck) #6

Well, I was referring to left and right margins… not top and bottome (as you show) but Sections Pro does have separate mobile settings for Width and Padding which helps. Thanks Lisa.

Would still like to see something DYNAMIC.


(Lisa Sandler) #7

It does also have horizontal settings. I just didn’t click that tab for the screenshot. I am using it with Foundation. Agree, though it would be nice if RW had those settings.


(Gary) #8

@1611mac This is exactly what my PADDDYCol and PADDYColPad stacks do. To do this correctly, breakpoints are needed to adjust that % side padding because the 3 device sized screens each have very different requirements. In addition you usually need to set a maximum width. I found that % side padding needs to be increased for large mobile size yet reduced (but never removed) for small mobiles. IMHO I doesn’t look right to see all content grow to fill a 640 or 768 width screen when you need more % padding to make it look right and balanced. It is also important for images because as they go full width, they can grow too high and end up making a mobile page too long.

The PADDY stacks are included with all of my Templates and Projects.


(Greg Schneck) #9

@webdeer… I’ll check those out! Thanks!


(r) #10

maybe this:
https://elixirgraphics.com/previews/structure/margins/
take a look at the tutorial video