I have made this, but no idea how to make it responsive, the center is an image, left and right content are text inside div with css property position, float etc, if any one do it responsive so let me know I will provide source code.
tml
It looks as though each text block corresponds to a bubble in the image.
So my first thought is to make easy text block stack with a separate bubble image to its left or right.
Set the breakpoint, then make each text block float left or be static. Use individual bubble images to put next to the text.
So on larger screen, hide the individual bubbles and show the large image. On small screens hide the large image and show all the bubbles etc.
Another alternative way is to keep a two-column setup with all the text on the left and an alternate image only on the right. You’d have to redesign the image so that all the text can be on one side.
Hi,
I’d be tempted to use css to do the middle part rather than an image although its a little fiddle but allows the opportunity to change things around a bit.
Here’s a rough idea and is just a first draft.
There would be issues if you had a lot more text but it would just mean the circles would not be joined which isn’t completely disastrous. There may be a way to allow them to overflow a little but I haven’t looked into that yet as I got bored half way through 
If you resize the screen smaller then I just separate the circles for a good effect but allow each item a full width.
You could use images for the inner circles but I like to have text content for my headings so you may be able to get close to your drawing with suitable fonts etc.
Hope it helps anyway.
3 Likes
Hey PaulOB you are hero, Yes this awesome. Its works for me, Thank You:grinning:
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.