Responsive flowing layout with arrows that reposition?

HTML & CSS
#1

Hi,

I’ve been asked to design a page that has a flowing timeline that will snake down the page.

if I have an initial grid 3 wide with arrows horizontally between the first → second ->third boxes and then the third has an arrow down to the row below to snake back along from right to left etc back and forth down the page, I’m not sure how to make that responsive so the arrows change position.

i.e. If the page gets narrow so there is only 1 or 2 columns wide I need the arrows to move from pointing sideways to pointing downwards etc

hopefully that makes sense.

I’m not sure what to google so if you know of any examples that would be great. I plan on using flex to get all the boxes to align. Ideally I want to do this as pure css if poss.

any thoughts appreciated

thanks

#2

You could probably use transform: rotate(90deg) in your media queries to rotate the arrows.

2 Likes
#3

ah yes thats a good thought.

I’ll give it a go and see how far I can get.

thanks

#4

We had a similar thread a while ago and I came up with this css/html based on the design requirements.

It’s probably not close enough to what you want but may give you some ideas.

2 Likes
#5

that looks awesome! yeah a little different to what I’m aiming for but great to see what can be done and I’m sure there is something in there that will be useful.

It’s amazing what can be done with css!

thanks

1 Like
#6

Here was another one that snakes and wraps and changes direction.

It was from a little quiz a while ago.

It’s quite complicated but does highlight certain techniques that you may need.

2 Likes
#7

oh thats great thanks. Thats exactly how I want the behaviour to work where it wraps one way and then the other.

Think there might be a bit of head scratching as i try to get close to anything similar!

1 Like
#8

I had a few minutes spare and tried out grid which seems to work well.

It does rely on a known number of items though (as does the other methods).

3 Likes
#9

Wow, thank you so much for doing that!

I’m sure you have saved me many many hours of work. It’s very much appreciated.

I’ll post back when I’ve got my page done.

thanks

2 Likes
#10

Hi,

as promised this is the final piece, which I am pretty pleased with. I’m sure I could tidy up the css a whole lot but the page validates and seems to be responsive to me. It’s pretty close to the pdf download on that page which is what i was trying to emulate.

https://www.roadmap2030.co.uk/vaccine/index.html

Thanks for all your help, I couldn’t have done it without.

5 Likes
#11

That looks very nice :slight_smile:
Good job.

1 Like