I’d like to have to … let’s say a text area and an image like here, that - when reducing the width of the browser - keep the same size together. How would I achieve that? I guess that in the example it’s just one image, but I don’t want to use an image with text in it for seo purposes.
That’s nothing that can achieved with Foundrys Column Stack and the equalize height options.
I understand what you’re trying to do with this. If you look at the souce code for this site they use a ton of inline code to achieve that. IMO, this does not look good on a mobile device. The gap between this container and the other content below is too much. Foundry uses preset break points for mobile devices and you would need to brut force this content to behaive like your example.
Yeah, I wouldn’t want to have it on mobile this way. Just wondering if there’s a stack maybe that can do it. If it would be doable with the column stack… great, but it isn’t
The first is with only Foundry stacks. Use a Columns stack with two columns and a 7/5 split for the image and the text. Equal height columns, vertically center content and set the color of the second column to the background color. Also set remove gutters and set the columns’ base margins to 0. I would leave the mobile columns set to 12, so that the image and text stack on small devices. The first column would just need an image stack. The second would use a Margins stack and a Header stack. Use the Margins stack to set the left/right margins. In the Header stack, I would use custom font sizes for mobile, tablet and desktop.
The second way is very similar., but put the Header stack inside a ViewportText stack and set the scale amount and max font size in the right column. You would not use custom font sizes in the Header stack with this method. The ViewportText stack will scale the font as the device width changes.
Personally, I think the first way gives a bit more control over spacing and sizing, but the second does scale the text linearly, as in the example.
(beaten by Steve! - he pretty much did my first way)
Yep , I use the custom font sizes in the header stack to have different header sizes for each breakpoint. That scales the text in the right side box. I still think that using the mobile breakpoint for the mobile viewport by placing the image above the text works best and is a “best practice” for a responsive site.
One more question to this. As you can see, when you open https://praxis-im-garten.de/AA8F79D2-WIP2/ on a big monitor with the browser in fullscreen, the picture and the quote become huge.
Is there a way to set a max height to the 2 column stack or the image? For the image I can only set a max width, which doesn’t help in this case.
RIght, I found the “solution” in another thread by simply using Stacks3 default image stack and then double clicking on the image to set a max height.
I’d love to use the alt tag and tooltip feature of foundrys image stack though, to credit the image author, even though they are under the cc0 license. So I hope there’ll be an update with a max-height feature eventually
I forgot that I had Joe Workmans Jack Stack somewhere. Wrapped around the image I was able to set a max height. Now there’s a zoom in effect on the image when I increase the browser window at some point, but I guess that’s nothing that can be prevented. At least I’m happy with the result now.