I’m having a terrible time centering content in Foundry. I’m new to Foundry coming from using blocks, which was great just putting things where you want.
I’ve tried ‘container’ ‘position’ and all kinds of things. I’m of course trying to make it work with mobile and desktop. When I get things looking good in desktop the mobile it thin. When it works in mobile the desktop moves out to the very edges. Tried fill, flex, fixed size and float. So many settings and yet can’t really find a stack that allows total control over both mobile and desktop.
Example is even the ‘scroll to top’ stack. There is no centre choice… just right and left. The mobile is okay but the desktop is way off where no one would ever see it. Another problem is in 2 columns my images on the right are okay on desktop but the text on the left column is HUGE spreading all the way to the left. I am missing something simple here because there is no way this is right… nor am I finding it simple. Like dragging blocks around. I’ve looked at Sparkle which works in blocks. Now after spending all this money on RW, Stacks, Foundry, would have to spend it all over again for Sparkle. Which has total separate settings for mobile, tabloid, desktop plus drag and drop. Any suggestions to save my RW life are appreciated. No, the site isn’t up to look at. It’s simple though. Ads on the left, text on the left. I want to set the width for desktop, tablet, and then one column in mobile. Which I’ve done by choosing single column in mobile. But cannot get the two to jive.
Also I tried Foundry Accordion and the mobile ran right off the page, making a scroll bar across the bottom. This is coming from the same cause I’m sure. The Foundry settings just don’t have the separate settings for mobile and desktop. I am missing something?
The post is a bit hard to follow. It’s always best if you can give an example page or at leat some screen shots.
As for text alignment
The Paragraph stack for example that comes with Foundry has a + That expands the alignment options from just one for all screen widths to an option for Mobile Tablet and desktop:
You will find that + on a lot of stacks settings.
As for the scroll to top I don’t see any issue with it, but again without seeing what you are refering to, it’s hard to say.
@Elixir Adam, answers all qustions on this form as well, he does have his own as linked to above.
If you’d like to provide me a ZIP file containing a copy of your project file I can take a quick look. You can send it to adam at elixirgraphics dot com
If your project is larger than say 3 - 4mb you’ll want to use something like WeTransfer to send it.
Also, when you send it please point out one specific element that you’re having trouble “centering” so I can zero in on what you wish to have me look at. You’ll also need to explain for me if you mean you want something centered vertically or horizontally.
Hey Guys, thanks for your great response. I have mucked around with the website layout to it’s not what it was, but here is the example of the ‘return to top’ icon, on the far right bottom. In 27 inch iMac layout. I tried everything, including looking for the centering settings in paragraph stack. No show on my computer. I’m all up to date on RW, Stacks and Foundry. I haven’t had time today or not much tomorrow to get back to this but will have time Thursday to dig deep. Again, thanks so much for your help, please don’t give up on me…
this image has the second column removed. What it was doing was loading on the far left. wayyy off. The mobile loads good in this setting. The only setting that works with the desktop is 'fixed size" which of course loads the 27 inch page nicely tucked in. But then the mobile version is way too thin on the mobile page… lots of margin left and right. I KNOW, that i really don’t know what I’m doing here… but I’ve tried so many things. I cannot find a page width setting for maximum on desktop… nor the settings shown in “teefers” post using the plus and finding moble… tablet… desktop align with paragraph stack. What the heck am I doing wrong. Remember I’m in RW 8.7… latest stacks and Foundry 2, not Foundation.
Yes it’s ugly and not ready by any means. This is me fooling around now trying to fix what was actually looking pretty good before. Note the far left column. I’ve tried column stack and container stack and others. It must be something simple I’m missing. I’ve looked in the Foundry main stack… nothing… that helped center or limit the width. This seems like such a simple thing to make simple. Too simple for me.
The screenshot I gave you above is from the Foundry (not foundation) paragraph stack. The same exact settings are on the Foundry heading stack. If you are using the Foundry paragraph stack, that plus sign should be right there in the inspector. What do you see?
The screenshots you have above aren’t giving us much to go on. They show us the results you are getting, but nothing of how you got there. We need to see what stacks are involved and what settings of each stack looks like.
We’re happy to help you out here, but without more to go on its difficult to say what you are missing.
Okay guys I’m finally getting back to this. In this graphic above please look down into the far right corner for the tiny arrow. That is the ‘return to top’ icon in 27 inch view. There is no setting to centre this nor will it drag into the paragraph stack or the header stack.
Also there is no setting in the paragraph stack for mobile, tablet, desktop for alignment. There is only one setting for this. Note: the return to top icon isn’t really that important to me. I am trying to rebuild the page back to how I had it to give you an idea of what I want. Which is simply a two column layout with ads on one side and stories on the other with the odd photo. Then when switched to mobile it all rolls into one column with each ad slipping in-between each story. Which works perfect by stacking blocks separately. My main problem is the desktop site will not align into a nice tight mid-screen setting unless i use fixed size. Then however, my mobile site has far too much padding or margin on the right and the left. I also had a big problem with Accordion not squeezing down into the mobile width. I will rebuild this and get some screenshots and perhaps a file off to Adam. The foundry stacks i’m using were, columns, cards (in left column) and image in right column. Then i tried placing them inside container to see if that helped. nope. I know I must be missing something simple. The main problem is I can not find Dougs example of Paragraph Style: control center with the mobile - tablet - desktop align.
Okay Adam I’ve sent the file off by dropbox, if it doesn’t work let me know. I really messed up the layout now. It looks like crap. Too many settings I have messed around with.
Correct. You cannot center the Scroll to Top stack’s trigger button. It is not an option.
And nor should it. Sorry if your were lead to believe you could, but I think it is because people were not given enough details at the time as to what exactly you wanted to center.
This is unfortunately incorrect. The Paragraph stack has both a uniform alignment setting, as well as detailed, per-breakpoint alignment settings. This is indicated on the Paragraph stack’s documentation page. The per-breakpoint settings are shown by toggling the + button in the settings. This is called a “detail” toggle. This is where that button is found:
If I’m understanding you correctly, I believe what you’re looking for is the Container stack. Have a look at the documentation page for Container to see what it does.
You will benefit from watching someone else build some pages in RapidWeaver and Stacks using Foundry. I’ve got a really simple page design video on the Foundry Tutorials page called “Build a One-Page Portfolio” that I think you should give a watch.
