I build my business page in Foundation 1 (5) and I was adding a page right now and noticed that the content of the page moves around depending on the browser’s window. I need that content to stay the same in any scenario, is there a way or stack to hold it where it belongs?
Check the vid: VIDEO
Looks like you are aligning content to the left instead of centre and that is making some content “move around”.
Many years ago a colleague introduced me to the idea of ‘soft’ and ‘hard’ space, and that’s really useful when it comes to page margins. Because generally we want different behaviours in different places. On mobile, for instance, we usually want a ‘hard’ margin (I like about a normal rem, or 1.6 Source rems). On desktop we usually want ‘soft’ margins which increase once our content reaches its maximum width. But in between, ‘hard’ (fixed size) margins can sometimes be problematic with responsive content.
Soft margins defined in horizontal viewport units (vh) can be a solution, but they can sometimes seem too soft (because we don’t necessarily always want proportional margins). Fortunately CSS allows us to used the calc() function to use a combination of soft and hard units, for instance: margin: 0 calc(10px + 2vw); (i.e. just left and right margins that are a combination of 10px plus 2/100 of the viewport width). These kinds of hybrid values using calc() are also brilliant for specifying responsive font-size, because they reduce the amount of scaling on small devices but increase it on larger ones. The CSS clamp() function can bring all these together, specifying a minimum, preferred and maximum value — in my example, margin: 0 clamp(16px, calc(10px + 2vw), 35.4px); — this would ensure that if 10px +2vw becomes less than 16px (which it will at a viewport width of 300px) it will stick at 16px, and if 10px +2vw becomes more than 35.4px (which it will at a viewport width of 1270px) it will stick at 35.4px. The CSS min() function will do the same if you just want to set a lower limit, for instance if you have set a max-width on your content.
3 Likes
I centered everything following your advice and it doesn’t look centered either. Remember I have a column at the right. I want to center the content inside the area at the left. Can I use a one column stack and put all the content inside and have it centered? Is that make any sense?
I will appreciate If you can share a code snippet here that I can adjust and use.
Looking at the code, the column on the left with the paragraph of text, has it’s content set to be left aligned, so check the alignment of the contents of that column. So I think it is an column contents alignment issue and not a margins issue.
It has been years since I used Foundation but my experience was that you couldn’t do much without using BWD’s Foundation Saving Sections Pro and/or BluePrint.
If you want an easy life, you should switch to Source where this type of thing is simple to setup and adjust. You can also include @jamessouttar 's calcs into every single stack using the Container Base stack.
1 Like
Source? Is that another framework? Like Foundation or Foundry?
1 Like
3 Likes
Thanks. I will check it out. Also I will try to see how to fix this issue with the columns settings. Maybe that will help.
In Foundation 1/5 you’ll have to add a class to the CSS panel (either site panel or page panel, according to your needs). In Foundation 6 you can add the CSS to a CSS Swatch (but not to a margin swatch, which can only handle percentage, pixels and REMs.
Following my example, the class you’d need to add would be something like this (I’ve called it ‘special_margin’ but you can call it whatever you want):
.special_margin {
margin: 0 clamp(16px, calc(10px + 2vw), 35.4px);
}
Then in the HTML or class panel of the stack you’re using as the page container, you just need to add special_margin — without the dot — and it will add the margin. The 0 refers to the top and bottom margins, and you can adjust this as you want. Inside the clamp() the first value, 16px, is the minimum size you want the margin to be. The last value, 35.4px, is the maximum size you want the margin to be. And in between those two, the middle value, calc(10px + 2vw), will make the margin 10 pixels plus 2 horizontal viewpoint units (2/100 of the screen width) until it reaches either the minimum or the maximum.
@Webdeersign has the simplest solution - Sections Pro and/or Blueprint from BWD.
It’s a no-brainer… I think for you it will be the solution to Foundation 1 content positioning and will solve all of your page layout issues.
Download, demo and example project files:
https://www.bigwhiteduck.com/stacks/sectionspro/
https://www.bigwhiteduck.com/stacks/blueprint/
https://www.bigwhiteduck.com/stacks/prostyles/
(Source is great and you should download it. But there is a learning curve. You may not want to break out of F1 yet solely because of your very basic need to centre stuff on a page.)
1 Like