Container N% width desktop/tablet, full width mobile

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.


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.


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.


@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. :grin:

Now I just have to always remember the difference between margin and padding…


Padding is the space around the content of the stack and margin is the space outside of the stack.


My new web site will be selling samplers with those words stitched into them. :grin:

1 Like