Hi guys, I’m wondering what the best work around for this would be?
I want to have text boxes over each circle, I could just create this as an svg, but I figured it’s good to have the text live for accessibility? I managed to create it fine in desktop mode using relative and absolute positioning, then created a mobile version but if you resize the browser slightly it bumps it all out, and I’m concerned about different phone sizes etc. Would there be a way to create a grid maybe?
If you’re not already doing so, I’d recommend using relative VW units so that your text and circles scale proportionally. Based on what you explained with the elements shifting around when you resize the browser I’d guess you’re scaling them using “fixed” units.
Do you have a read-only link for the example you created so I can take a peek?
So I took some time to work through how best to create this, and I think the most flexible way is to make the circles as on-page elements as well rather than just the text.
Basically you’ll setup an outer wrapper that has three flex columns that will house each of the circles and text with the connecting lines within a background image. I threw together a Read-Only project link with the setup that should scale nicely throughout all of the breakpoints so feel free to take a peek at that below:
I’m not sure this is the best way to go about a graphic like this or not, but it definitely keeps the text live and allows for some flexibility on smaller screens if you decide to switch up the layout of the graphic.
Hey, this is so helpful. I was so stuck on this and just couldn’t figure it out, now that I’ve seen what you did it makes perfect sense and is a bit of “Why didn’t I think of that!” situation. Thank you very much again, I really appreciate your help.
