I tried to copy my static footer (just a simple one-column stack with a three-column-stack within) into the ‘target stack’ by Joe Workman.
Problem: I can’t get the footer to behave like before, when it was inline with the respective page’s columns. It is always wider. Changing the margins within ‘target’ won’t help, because then in phone mode the footer becomes too narrow.
Why does ‘target’ change the properties of the one-column-stack within?
How can I solve this problem?
Do you have a URL to a page?
Hello Doug,
I will set up a test page tomorrow. For the moment, I only have two screenshots showing the problem. Cheers!
I uploaded the page to my testing URL: http://www.test4web1234.de/
Please check the German language version.
Cheers!
Not seeing the issue. Both footers are the same width when I tested: Safari, FireFox and Chrome, all on OS X.
Perhaps it’s a cache issue. Did you try clearing your browser cache or a different browser?
Maybe it really is a cache problem. When testing within Rapidweaver, it did not work. And in Safari neither. I’ll try it again as soon as I get back to my Mac.
Can you please try it on an iPad format? The maximum width of all elements of my webpage is 1600 pixels. So with wider screens there is no problem. The same with iPhone screens. The sizes in between seem to be problematic. But I am not at my Mac right now. I’ll try again later.
I had dragged the window width of all browsers from wide to narrow, and the two footers were always the same size. I just checked on an iPad, and they are the same width on that too, in both portrait and landscape.
Thank you. Sounds good! I’ll check it ASAP.
From my iPad (regular 5th gen) iOS 14.2 Safari:
http://www.test4web1234.de/?lang=deThe two footers are only there for comparison. The upper one is a simple one-column-stack (with a three-column-stack within) and the lower one is set inside a target stack. On some pages near the end of the website there is not much text so that target sticks the footer to the bottom of the screen.
BTW what do you mean by getting rid of a language?
My tests are the same as Doug’s. iPod Air with iOS 14.2. I am testing the same exact link too and see the same as his screenshots.
My test on an iPad Pro (1024x1366 px) in portrait format always show the problem as shown in the first screenshots in this thread.
The problem is still there:
To recreate the problem on a big screen like an iMac, it is necessary to pull the window narrower and then wait. As soon as target moves the footer to the bottom, it gets wider than the fixed footer. See screenshots (same result in Safari, Firefox, Chrome and Opera).
I have tried and tried to get it to fail. Unfortunately, screenshots help little when trying to debug something like this.
All I ever get no matter what width is two footers that look the same. Since I don’t know what exact settings you are using, I can’t say what might go on.
I’d probably "simplify” the page a bit and just go with the very minimum and see if you can get it to fail without things like RWML on a test project. Just the minium stuff like site styles, some simple contetn and the target stack.
@gabor, it looks like you have a very large monitor. On my external monitor (1920x1200) I see the same thing as Doug (@teefers).
I deleted the HTML node that has the row of product images, and then I could see the issue. The issue only happens when it’s “pinned” to the bottom and not “in-line” with the content. For that to happen, the content on the page needs to be shorter that the window height. On my screen, I don’t see the issue, because at any browser width the content is tall enough to be a little taller (or the same size as the window) which means the footer is not getting “pinned” to the bottom.
Can you republish that page without that row of images? That will make it easier for us to see the actual issue without having to edit the HTML code. If you do that, we can probably get you some CSS code to fix it.
I received a message when I inspected my master style: ‘Your Foundation Stacks are out of date. Please update to version v.’ and 'Your Foundation Theme is out of date. Please update to version v.
Download the latest theme from https://foundationstacks.com/theme/download.’ and ‘Foundation theme not applied! Please set the Foundation theme as the theme for this project.’
How can I update my foundation theme? The link above doesn’t work.
