Dual column autolayout help please

Hi guys,

I am creating a dual column autolayout for a web page, and it works exactly as expected - until the text in the objects start to meet after switching to a vertical layout via the wrap feature.

From here the text overlaps rather than expanding the frames.

Please see attached screen recording to understand what I mean, and I’m sure it’ll be a straightforward user error somewhere :slight_smile:

Thanks very much for any help here :slight_smile:

Here are all of the elements are their relevant constraints/autolayout settings:





Looks like you either have some hug issues or maybe some constraint issues.

Can you post the file itself or else link to the file where we can access it? Screenshots are not easy to determine issues.

1 Like

Also looks like some extra levels of nesting that you could do without. That might be giving you fits.

1 Like

Thanks for your reply, how would I do so? I’m just on a starter plan ATM

1 Like

I think this must be it, as it’s behaving oddly and I think that must be the reason - just stuck ATM how best to attack it further as have reduced it to bare minimum, nesting wise - at least according to my current understanding of Figma.

Thanks a lot @KennLucas I really appreciate your suggestions :slight_smile:

1 Like

You can export the file as a .fig https://help.figma.com/hc/en-us/articles/8403626871063-Save-a-local-copy-of-files#:~:text=Open%20the%20file%20you%20want,file%20to%20your%20downloads%20folder.

Mine doesn’t say save as local file. Mine says Save as .fig since I use the desktop app.

You can upload that file here.

OIr just share the file and give us the link here. https://help.figma.com/hc/en-us/articles/360040531773-Share-files-and-prototypes

I am headed to lunch in about 30 minutes. This should be something I can review and get back to you soon.

Hopefully you can provide the file before then. :+1:

1 Like

dual column.fig (47.3 KB)

Hi KennLucas, this should be it?

1 Like

Oh.

Your BODY TEXT frame is set to fixed height. Change that to hug.

I also ungrouped your “Frame 1000003998.” You didn’t need that nesting.

It is always that ONE thing that you can never find! The more complex we get, the more “little things” have to be just right on every frame.

I might be able to look more tonight to see more. But at least that solves your immediate issue.

1 Like

Thanks so much will try this now! :slight_smile:

That fixed it! I really appreciate your help, thanks again :slight_smile:

It absolutely is! I think I’d thought I’d checked that parameter multiple times, and so must’ve overlooked it. Brilliant lesson in thorough investigation :slight_smile:

1 Like

You can investigate as thoroughly as you like!

It still happens. :face_with_symbols_over_mouth:

A second set of eyes is far underrated.

I especially like when my boss finds the ONE thing that I overlooked.

Glad that fixed you!

2 Likes

Haha wise words!

I’ve just input the copy of the component into my home page frame and it no longer responds the same - it doesn’t wrap anymore and the content is cut off at the sides when resizing the home page frame which is very odd, so now I’m on the hunt for why this is now happening :thinking:

EDIT: found it already the component copy needed to be set to ‘fill’ width - and now it behaves as it should, brilliant :slight_smile:

1 Like

Nicely done!

Figma makes the post have to be 20 characters. Dumb. :roll_eyes: