How to mark up such a unit?

Please tell me the direction in which to move that would mark up correctly , adaptive ( up to 768px ).
The first picture in 1920
5c9e86b6a76da986415459.png

The second picture in 768 resolution
5c9e86ca4736e727469485.png

Curved line is picked as background-image and other blocks to position absolute, but when we narrow the screen all goes wrong (
March 19th 20 at 09:15
2 answers
March 19th 20 at 09:17
Do entirely picture and do not worry)
Yes, such a variant )
The worst and the most extreme I'd say ) - gerald.Kuhlm commented on March 19th 20 at 09:20
@gerald.Kuhlm, well, media queries, not so much should be) - Melvin.Gutkowski commented on March 19th 20 at 09:23
@gerald.Kuhlm, or SVG conversion of coordinates of reference points depending on the position of text blocks. In JS, of course. - Pauline_Heidenrei commented on March 19th 20 at 09:26
@Pauline_Heidenrei, and can throw some manual that I though the topic was delved into how to do it - gerald.Kuhlm commented on March 19th 20 at 09:29
@gerald.Kuhlm, look at the Bootstrap popover is 4, it can be adapted to your task - Eudora commented on March 19th 20 at 09:32
Do not make the rubber container. to the narrowing of the screen is not narrowed anything, and were replaced under the new Absolutes and, if necessary, on a new background-image - Janice_Robert commented on March 19th 20 at 09:35
@Eudora, honestly don't know how you found the connection between popover'rum and my task ) - gerald.Kuhlm commented on March 19th 20 at 09:38
@Janice_Robert, then get very many @media here is direct very much because of extreme block of text to be almost at the border of the page - gerald.Kuhlm commented on March 19th 20 at 09:41
@gerald.Kuhlm, for example, if the bootstrap grid , you get 1 main and 2 resolution media query because the width of the containers is equal to 1140 , 960 and 720, respectively, the image will change only 3 times. - Melvin.Gutkowski commented on March 19th 20 at 09:44
March 19th 20 at 09:19
And what do you want ? If full rubber design - for the beginning - to fully "elastic" curve, with the ability to reference the coordinates of the blocks. Better to do a curve in svg, as when expanding the picture will change the line width. The decision for the line may look like this - at the window.resize, through a small time interval, redraw the curve on the svg and insert it in background.
For blocks with the text all the more frightening - it is necessary to place the blocks exactly at the fixed point, and so that the blocks do not overlap each other. If the text unit will not be as it seems the designer, and this how I want the site owner then will have to master the skill of a tiler ;)
As a simple option to put text boxes with the frame in the upper-left corner, but if beyond, then the right or bottom... on the same window.resize
I didn't even realize this is what you wrote to me not saying much ahah.
and could you tell how to Google for example that used to stumble upon the implementation of similar examples.
Thank you! - gerald.Kuhlm commented on March 19th 20 at 09:22

Find more questions by tags HTMLjQueryCSS