Responsive lines

Did you have an idea of how the design would respond as the screen got smaller? And is the background going to remain a solid color or would there be the possibility of an image/patter/gradient?

I’ve mocked up a fairly straightforward solution below that should scale well until a smaller breakpoint where I’d imagine the protruding accent line would hide itself–but obviously this may depend on how the design looks on smaller devices:

layout

Div #1 is a wrapper for the red box content (I’m guessing an image or sorts?) and should have a border on the bottom and right sides, and div #2 should have a border on the top and right sides and be positioned to the right, up next to the side of div #1.

If div #2 is roughly 50% of the width of the left column, the line should stay centered underneath the text until the design would stack, and if you’d still like the same effect you can add a left border to div #1 and position the div #2 above it (anchored to the left side) with a border on the left and top.

It seems like a fun challenge to get this working so if you’re having trouble figuring out how to get it setup in Webflow then either send over a read-only link with your current progress or let me know and I’ll see if I can quickly whip up an live example from scratch :+1:

2 Likes