Layout and General settings (foundry)

I see some of the stacks in foundry has

Screen Shot 2020-12-28 at 10.57.54 PM

Along with

Screen Shot 2020-12-28 at 10.58.00 PM

or layout and general settings…

I’m kinda confused as to what each one does

Fixed width I understand. Set it to a fixed size that does not change.

Fluid I assume changes based on window size?
But then doesn’t
Flexible do the same thing?
Fill as well?

And then
Float? Does this make things go around it?

I want my page to fill to the edges almost leaving a small space between the edge and background.
Right now my page doesn’t reach the edges… Ideally i’d like everything on my page to look the same no matter how big or small your screen is. So that means site title font needs to also get bigger on bigger screens…

Foundry’s got really good documentation. Check out the Container stack for example which will get you started on answering some of these questions.

Similarly, Stacks itself has some good basic info on these settings:

(although that relates to version 3.0, many of the principles remain the same).


1 Like

OK what i’m asking is How do I get my website to resize based on window size? Meaning I want my pictures to get bigger if the windows is bigger, and fonts to get bigger if the window is bigger, but stay in the same place and be proportional. Just everything get scaled up and down based on window size.


That’s going to be difficult to achieve in the way you’ve described - mainly because the shape of a 27" screen (landscape) isn’t the same as the shape of an iPhone 6s (portrait). So you’ll almost certainly need to make some compromises along the way.

Looking at the site, the photograph is full width - so are you talking about the content on top of the image - the slideshow, the Majestic Blah, etc?

Foundry has a site width - set in the main Foundry stack - and then you can drop in Container stacks which can also have their own - different - width. If you want something to go the full width of the page, don’t use a container stack. Simply add the content.

As for making headers change size depending on what device they’re being viewed on, you can do this using the Header controls in the main Foundry stack - see attached,

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.