This should be simple, but

I can’t figure it out. I don’t think it’s a Foundry problem per sé but has plagued me forever.

I have a two column stack. On one side I have text, on the other, a photograph. In the full screen preview, It looks fine. As I scale down my web browser, everything transitions nicely except the photo. It stays complete and shrinks in size proportionately. I want the photo to fill the frame it’s in, no matter the window size. Because proportions are changing, the photo needs to be cropped.

I can lead you to a website that does exactly what I’m talking about, but a picture is worth a 1000 words…

What I have @ full size:

What I get as the browser window gets smaller…

I can’t figure out what to do. Is there hope? Thanks in advance.

1 Like

That one shouldn’t be a problem… Have a look at this sample project file I built. We’ll use a Columns stack to put our content side-by-side. Let’s turn off the gutters to make the content abut.

The hero of this layout is going to be the Vertical Center stack. This will put your content for the left column in the center of the stack vertically, but it’ll also let us fool the right hand column into being the same height when we use the Backdrop stack for our image.

The layout in Edit Mode will look like this:

In my project file I’ve gone an extra step and used custom columns so I can set the ordering of the columns. This will allow us to put the image on top at the mobile breakpoint. If you’d rather though you could just wrap the backdrop stack in a Visibility stack and hide that column’s content for the mobile breakpoint as well. Personally I think it is nice to keep the image. If the image were on the left to start with we don’t need to use the ordering settings for the columns stack, as the left-hand column is the one that gets placed on “top” at the mobile breakpoint.

We also have to remember to turn off the base margins for our columns stack as well.

Hopefully that helps out you, and anyone else that wants to do this.

It should be noted that as you requested in your post, the image will be cropped. I know that isn’t what everyone might want, but that is how it would need to happen since we’re looking at responsive design here in a confined space.

Download link for project file: FancyColumns.rw8.zip • Droplr

2 Likes

Woohoo! thanks Adam - What about if I wanted a slider? I can make sure all of the images are the exact same size. Do I do the same thing?

The way it needs to work the image need to be the background of the DIV so it gets cropped and scaled. To do that you’d need to substitute the Motion stack in place of the Backdrop stack.

1 Like

Hi Adam - everything looked great in the demo, then when I went to do it myself it didn’t quite work (though it was better :slight_smile: I’m wondering if the margin / padding settings I have for the text area (on the left) have anything to do with it?

I tried a bunch of things - I even dropped my info into your layout and I ended up with extra space towards the end as it transitioned to mobile. I’ll play around some more tonight. I’ll keep you posted! You may wake up to a project file, just in case you find it helpful.

1 Like

My sample isn’t a one size fits all solution. You’ll have to modify it to work with your content. Your example you sent me has more content in the left-hand, lime green column than will fit in the space you’ve allowed it at the smaller breakpoints with the Vertical Center stack. Increase the heights at various breakpoints and experiment. As an example try 500px for the Vertical Center stack at all three breakpoints.

Only you can build your site to fit your content. :slight_smile:

Hey @robert – Did increasing the height of the Vertical Center stack work in addressing your layout concern?

Hi Adam - Sorry for the delay - remote teaching kicked in with a vengeance(!) I indeed was able to get it to work. I didn’t realize I had to fiddle (and fiddle) with the breakpoints. I noticed on your example that you didn’t have margins for the top and bottom of the text block. I did, and for each breakpoint to boot. I got rid of them and started experimenting with the breakpoints and eventually got it. Thanks for your help! Going to publish tonight.

Forgot to mention that I sent you the file just in case I was doing something wrong, not to have you build it for me. As I mentioned, I didn’t know about the breakpoint issue. Still wet around the ears around here.

1 Like

Glad you got it sorted after looking at the different breakpoint options for the Vertical Center stack. If you’re good to go and you feel like this is wrapped up to your satisfaction, let me know and I’ll close this thread. :+1:

Yup - good to go :slight_smile: Publishing soon!

1 Like