Sorry for the weird subject line, but it captures my issue in a nutshell, I think.
I have a container that I would like to be 85% of the screen when on desktop and tablet, and full width on mobile. The desktop/tablet part is pretty easy, but I can’t see a way to keep the desktop and tablet settings and still have it full width on mobile.
I have seen some threads on this, but I couldn’t seem to practically apply the advice given in those threads. Is what I want to do even possible? I am stumped…
Thanks for any pointers on how to solve this.
Doug
I think I may have (sort of) solved this problem, though I don’t know if I’ve solved it the best way possible. I added a 3-column stack where the desktop/tablet widths are 2-8-2 and the mobile widths are 12-12-12. I then added the container to the middle column while the left and right columns remained empty.
On mobile, the stacks without content seem to disappear. On tablet/desktop, the stacks without content seem to act as spacers.
Does it make sense to do it this way?
I would use the Margin stack. Drop whatever content into that and set the margin for each device.
2 Likes
I’ll give that a shot; it certainly sounds better than the solution I came up with. Thanks!
@dougmon The Margin stack is a hidden gem. Oftern overlooked, but it solves so many problems. Really worthwhile to check out Adam’s video about it:
You’ll have to scroll a bit.
3 Likes
@Steve_J, I tried it with the margins stack and it worked beautifully. Thanks for the advice/solution.
I’ve looked at it before and thought “Hmmm, sounds useful” but now I’m sold. I think it has replaced container as my favorite stack. 
Now I just have to always remember the difference between margin and padding…
2 Likes
Padding is the space around the content of the stack and margin is the space outside of the stack.
3 Likes
My new web site will be selling samplers with those words stitched into them.
1 Like