Responsive lines

Community resources General
1

Hello,

I need to make these thin white lines responsive in my layout, but it gets messy and out of place in different sizes of the screen. Does anyone know how to fix it?

Thanks!

Screenshot_7

2

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
3

Mikeyeven,

thank you for you’re quickly response! This red square will be an image. This is the view link of the project: https://preview.webflow.com/preview/norden-do-zero?utm_medium=preview_link&utm_source=designer&utm_content=norden-do-zero&preview=160ac8d356f6eb0ee45efbd324483b66&mode=preview

I found where to edit the borders, but the divs move independently from each other, so they don’t always stick together, so the responsiveness is not working

4

From what I can see on your read-only link (my apologies if your in the process of working on it!) you’ll need to adjust your structure a bit as right now most of the internal elements don’t have enough constraint to keep them in place.

  • The Section should contain the main background color and take up the width of the page (or as wide as you want the page width to show)
  • Inside that should be your content container with two columns, one for the content and the smaller div #2, and the other for the image and div #1
  • Inside the left column, you’ll have the text container and an element container below it which will hold div #2
  • In the right column, you’ll have div #1 and, within that, the image element

With that structure in place you should find that things stick together a bit better, however don’t be afraid to utilize flexbox for the various nested wrappers to keep elements where you want them.

5

Hey, Mike!
It has worked with divs in a grid. I’m a designer, so I didn’t understand this concept of grid in the view point of a programmer, so that’s why I didn’t get it. I thought it was grids concerning spaces and margins haha
So now I’m trying to put an image under the div with z-index, but it’s not working. I’m going to search a bit

6

Animated mockup! You went the extra mile here :smiley: Great.

1 Like