Is this somehow possible?

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.

Any help appreciated,
Darian

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.

1 Like

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 :wink:

Thanks for checking, Steve!

Here is an example I put together. the only time the photo is above the text is on an iphone.

2 Likes

I see a couple of ways to do this.

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)

2 Likes

Yep :wink: , 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.

and I pretty much duplicated the whole page also :slight_smile:

2 Likes

I agree 100% with this. On a portrait phone, the image and text side-by-side are too small.

I outlined the second way, since he seemed very keen to have the font scale and not just change at breakpoints. ViewportText does that very well.

I was most of the way through writing my post when you posted your example link. Nice job, btw.

3 Likes

Awesome, thanks guys. That helps a lot. Steve, can you send me your test project file?

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.

Cheers
Darian

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 :slight_smile:

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.

Sorry for the monologue :wink:

1 Like