I tried searching online for this problem but to be honest, I wouldn’t know where to start but I have been having trouble designing a responsive component and having it behave the way I’d like it to. I’m designing a text container component which includes an overline text, title, description, and button - all of which except the title are optional so I can turn them on or off using layer properties. I plan on having 3 variations of this text container (See example below):
- Without background fill
- Full width background fill
- Background fill with margins
The problem I am having stems from the second and third variation. I want those variations to hug the elements using the same vertical padding based on whatever layers I want on or off (i.e. I turn off ‘overline text’ and the padding above and below still maintain 64px padding) WHILE being able to constrain the text container within a certain number of columns within the background fill based on whether it takes up full width or extend only up to the margins.
I apologize if this is difficult to make sense of (trust me…I’m having difficulty trying to explain this as easily as possible), but I will provide examples using the full width variation.
Here’s what I’ve tried:
- Auto-layout was the obvious first approach and it solves the vertical padding but horizontal padding is the main issue. It’s set on having fixed values on either side when I’m mostly interested in having the text container constrain itself within the columns I’ve set it to when I scale the breakpoint (See example 1)
- Instead of auto-layout, I also tried having the text container inside a frame which acted as the background fill. What it does resolve is the horizontal responsiveness but the vertical padding doesn’t hug the elements based on what layers I turn on or off - essentially the opposite of what I tried with auto-layout (See example 2)
- The closest I can get to resolving both issues was applying auto-layout and using absolute positioning for a rectangle that acted as the background fill; vertical and horizontal padding work responsively, however, the absolute positioned rectangle doesn’t constrain itself within the breakpoint’s column layout (See example 3)
Maybe I’m overthinking this and the solution is much simpler than I thought but if anyone has any idea on how to fix this, I’d greatly appreciate it! Thanks!