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.

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:
https://foundry.elixirgraphics.com/tutorials/

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

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

1 Like