Foundry Container Settings?

Hello,
I know what the container settings are, but unsure how to use them most effectively; getting the most out of Foundry’s responsive and mobile first design.

What are the container settings you use most for the main content of your pages?
Such as your container setting for:

  1. Layout “Fill Mode”

  2. General “Type”

  3. General “Max-Width”

  4. General “Max-Width Units”

  5. List item Allow “Overflow” - When do you us Overflow and Not Use Overflow?

Thank you for your insight.

Hi @weeQtoo

The main goal of the Container stack is to contain content to a specified width – keeping the content contained in the stack from exceeding a specified width.

Most times you will not need to adjust anything in that Container stack except for the max-width value.

Most of what you’re asking about though is answered in the documentation for the Container stack. Please read that. I suspect it should cover your questions. And of course I’ve already typed all of it out there in the documentation, so there’s no need in me repeating it here.

The one thing not covered that you asked about is the Overflow setting. This is an advanced feature that most people will not need to adjust. It deals with how Stacks builds its pages and how it sets the CSS overflow attribute to hidden on all of stacks. This setting allows it to overcome that setting for things like shadows, etc.

But as I said above, your questions are covered in the documentation, so please go have a look at that.

Thank you for pointing out Foundry’s documentation, you do a great job, and I use it often.

I’m wrangling with what a page looks like on larger, 20" and above displays and making sure it looks as good as it does on a 16" laptop.

Do you have a recommendation beyond the default setpoint of 1140 px for the max-width of the container? On a 20" plus display, 1140px seems too small.

Is there a way to add a 4th breakpoint for larger displays?

I don’t have any recommendations. It comes down to your site and your design and what you’re trying to achieve.

As for an additional breakpoint – no, sorry that isn’t an option. These three are what we are working with. The Container stack doesn’t have individual breakpoint settings though. You set it for the max you want to allow. If you think 1140px is too small for your use case, make it larger. This will vary from use case to use case. I often use multiple widths throughout a page to attain different designs.

Best advice I can give – read the Documentation and experiment.