Requesting guidelines for responsive design / Foundry

I found plenty of threads for responsive instructions for different stacks, but I am looking for more thumb rules what to do with basic design.

I have looked tutorials from Elixir’s page as well Foundry course, yet find a bit confusing how to make pages responsive - when to use container, or second container, when using columns and margins. Many Foundry and Potion Pack stacks are itself responsive to mix it up even more.

Can anyone with more extended experience to open your guidelines how you start building a responsive site regarding these responsive stack elements?

And please to open these Container Layout Fil Modes: Fill, Flexible, Fixed Size and Float.

For example, I must do something wrong for I don’t get responsive results with this setup: Margins → Container → Columns (Standard Columns with 2 Columns) with Image in another and Header + Paragraph in another. Image and text will span out from table + mobile view.

Same here, with Margins → Container → Header + Paragpaph

You should put the Margins stack inside the Container stack.

Remember that by default, stacks will fill their container and go to the edges of the browser. This is what Fill is and is the same as Flexible set to 100%. These are important concepts to grasp.

Think of the Container as a Max Width stack that sets a limit of how wide a layout will go. When a browser gets smaller than the Max Width, the contents will become responsive and the width will reduce and the content such as a heading or paragraph text, become responsive and flow onto the next line.

Here’s a trick I use a lot. I aways use Container set a max width to about 1000 or 1100 or 1200px depending on the look I want and I often vary it on a page to make the page more interesting:

Then put your content into the container, such as a 2 Col stack, and set the stacks setting to Flexible and adjust to about 96%. This will add a 2% “margin” on either side of the content that reduces in px size as the screen width reduces. This avoids the need to setup a Margin stack for 3 different breakpoints in name situations.

Also it is good practice to frequently adjust the screen width as you are working in Preview mode by dragging the side of the RW window, to see exactly how the content is responding to the screen width.

Hope this is useful.

2 Likes

With Foundry being a free form layout and design tool you will often find there is more than one “right” way to do things.

When building responsive sites in Foundry you will almost never need these settings. These are default setting that come as a part of the Stacks plugin, and Foundry doesn’t really need them. I can’t remember the last time I even made use of them for anything.

Without having your project file in-hand it is hard to tell exactly what is going on with your content, but it looks like you’ve set some fixed widths in Stacks for elements and they’re not being allowed to scale down for the small breakpoints. I’d imagine you used the Fixed layout mode you were talking about above. Again, you don’t need that built-in layout mode that comes as a part of Stacks when building Foundry based sites. You can leave that Layout Mode set to its default “Fill” setting almost all of the time.

1 Like

Your answer helped me a lot! I got the working now but still have a lot of learning ahead.

One further question, as a thumb rule, if I want to add margins or padding.

Let’s say I use:
Container max width 1100 + Container flexible 96%

then I wish to have Margin: Top 40 & Bottom 20

Is it better policy to have it like this:

Container max width 1100 + Margins stack with said margin + Container flexible 96%

Or

Container max width 1100 with the said margin set up + Container flexible 96 %?

9283371

Thank you @elixirgraphics for help!

BlockquoteWhen building responsive sites in Foundry you will almost never need these settings. These are default setting that comes as a part of the Stacks plugin, and Foundry doesn’t need them. I can’t remember the last time I even made use of them for anything.

This was excellent clarification. Leave it on ‘Fill’ it is like you said below.

I’d imagine you used the Fixed layout mode you were talking about above

Indeed, I had Fixed for 1170px. I took an idea from some tutorial to have content like images, paragraphs, and divers not go from side to side of the page, but missed the point how to do it so the page was kept responsive.

A question if I may,
For some reason, Banner gives full image when in mobile size but in full width, it is cut from bottom. Is it some how scaled perhaps? Image is 1255 x 836px 300ppi


I always but Margins inside Container.

However, I only use Margins when I want different values of padding and/or margins for the 3 different device sizes. Other wise it’s quicker and faster (in Preview mode) using the standard Stacks settings in almost every stack, to add the top “gap” with top and bottom padding or margin.

Your second issue is due to putting content inside a fixed height banner which exceed the height of the banner as the screen size reduces. So either increase the height of the container for mobile (if that setting is available) or don’t use a fixed height container. Instead, let the content inside the containing stack set the height and add a margin to the top and bottom.

These are really important things to understand.

Thank you again for the help!

Unfortunately, I didn’t quite get it business with fixed height banner. I have tried multiple options, and it always cuts the bottom of the image of when full-width screen but works well on smaller screens.

Setting: No containers with the banner stack

Hero Banner mode on:

Settings with Container:

Works only Hero Banner mode off and with Wide Screens: 825px.

Could you take the banner out of the container? Then try again…

Same result!
Tried even with the different image size.

Are you just wanting the image or are you wanting text to appear on top of it too? If just the image then try adding an image stack to a container.

you’ll need Banner or equivalent if you want content on top of your image. you could also try cropping the top of your image in an image editor to see if you get better results.

Alternatively some of the BWD stacks allow you to set a background image and dictate which portion of the image is saved if cropped (i.e. Bottom centre in your case)

Hi there @TapioMichael

Let’s start from the top… The first thing I want to mention is in regards to this:

You should be using a 72 dpi image, and not 300ppi. This could be a part of your problem. I suspect though it is also to do with a misunderstanding of how the banner stack works.

In a responsive environment the background of a banner is going to be cropped and or scaled up or down. This is inevitable as you’re working with a lot of variables and changing widths and heights. To keep that image in proportion and make sure it covers a set area the image has to be scaled and cropped.

Let’s say you have a banner that you’ve set at a fixed height of 500px. The banner will always stay this height but the width will be variable. Let’s also say your visitor comes to the site with their open to 1000px wide. This means if you have an image in there that is exactly 1000px wide and 500px tall they will see every bit of your image (excluding some other variables).

If another user visits the site and they have their browser open to 2000px wide the image will be scaled upwards to make sure the entire banner area is cover by your image. This means also that your image will be cropped, and you won’t see all of it because the height of the banner is going to remain fixed at that 500px you set it to.

Using the Flexible height mode on the Banner stack will allow the height to flex based on the content of the Banner stack and breakpoints of the browser, but you will indeed still have cropping and scaling to deal with.

If you just wish to have an image at the top of the page with no content on top of it, you can insert an Image stack at the top of the page and set its Image Sizing option to “Upscale to 100% Width.” This will ensure the image fills the area no matter how large the browser window gets and the image will remain proportionate.

Adding content on top of an image, as with a Banner means you have other considerations besides just showing the full image and leads to cropping and scaling of the image. It is just how a responsive setup works with content such as this.

1 Like