Greetings.

Tell me, please, how can you adjust the positioning of the .team__item elements relative to the line on the pictures, so that when resizing the windows they adjust, it is clear that media queries, but there’s a reluctance to write new indents for almost every 200 pixels, is there some more convenient way?

Thank you in advance.

Link to the code https://codepen.io/anon/pen/vWjOVJ

$primary-color: #e74c3c; $secondary-color: #f4f5f9; $text-primary-color: #999999; $text-secondary-color: #ffffff; body { padding: 0; margin: 0; } @font-face { font-family: 'OpenSans'; font-weight: 400; font-style: normal; src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; } @font-face { font-family: 'OpenSans'; font-weight: 500; font-style: normal; src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; } @font-face { font-family: 'OpenSans'; font-weight: 600; font-style: bold; src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; } .section { padding: 150px 0; &_background { &_image { background-position: center center; background-size: cover; } } &_no_padding { padding: 0; } } .heading { font-family: Opensans; &__title { font-size: 2.25rem; font-weight: 700; letter-spacing: 3.6px; text-transform: uppercase; margin: 0; } &__subtitle { font-size: .875rem;/* ΠŸΡ€ΠΈΠ±Π»ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·-Π·Π° подстановки ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² */ font-weight: 400; } &__notch { &:before { position: absolute; content: ''; width: 6px; height: 36px; background-color: $primary-color; } &_left { &:before { margin-left: -30px; margin-top: 4px; } } &__right { &:after { margin-left: 30px; margin-top: 4px; } } } &_center { text-align: center; } &_color { &_light { color: $secondary-color; } &_grey { color: $text-primary-color; } &__dark { color: #6a6a6a; } } } .team { $b: &; position: relative; background-image: url('https://i.imgur.com/WcVZqQx.png'); height: 745px; &:before { width: 100%; height: 745px; position: absolute; content: ''; background-color: rgba(0, 0, 0, .75); } &__spec { display: none; position: absolute; top: 200px; color: #ffffff; font-size: 14px; font-weight: 400; letter-spacing: 1.4px; left: -12px; width: 150px; } &__name { display: none; position: absolute; top: 160px; color: #e74c3c; font-size: 24px;/* ΠŸΡ€ΠΈΠ±Π»ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·-Π·Π° подстановки ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² */ font-weight: 500; left: -15px; width: 150px; letter-spacing: 1.4px; } &__heading { position: relative; z-index: 1; padding-top: 150px; } &__graph { position: relative; bottom: 150px; height: 640px; width: 100%; background-image: url(https://grimesco.de/teamgraph.png); background-position: center center; background-size: cover; } &__item { position: absolute; top: 0; width: 57px; height: 57px; border-radius: 50%; border: 3px solid $primary-color; &:not(.team__item_active) { &:hover{ width: 88px; height: 88px; box-shadow: -0px 10px 15px 10px rgba(0,0,0,1); &::after { position: absolute; content: ''; width: 100%; height: 100%; background-color: rgba(231, 76, 60, 0.5); border-radius: 50%; } &::before { position: absolute; content: ''; width: 1px; height: 50px; background-color: #ccc8c8; left: calc(50% + 1px); top: 85px; } #{$b}__name { display: block; } #{$b}__spec { display: block; } } } &_active { position: absolute; width: 88px; height: 88px; margin-top: -20px; box-shadow: -0px 10px 15px 10px rgba(0,0,0,1); border-radius: 50%; z-index: 222; border: 3px solid $primary-color; &::before { position: absolute; content: ''; left: calc(50% + 1px); top: 85px; content: ''; width: 1px; height: 50px; background-color: #ccc8c8; z-index: -333; } } &_1 { background-image: url(https://grimesco.de/team_1.jpg); top: 340px; left: 20%; &:not(.team__item_active) { &:hover { top: 320px; } } &:not(.team__item) { &::after { position: absolute; content: ''; width: 100%; height: 100%; background-color: rgba(231, 76, 60, 0.5); border-radius: 50%; } } } &_2 { background-image: url(https://grimesco.de/team_1.jpg); top: 285px; left: 40%; &:not(.team__item_active) { &:hover { top: 265px; } } &:not(.team__item) { &::after { position: absolute; content: ''; width: 100%; height: 100%; background-color: rgba(231, 76, 60, 0.5); border-radius: 50%; } } } &_3 { background-image: url(https://grimesco.de/team_1.jpg); top: 325px; left: 60%; &:not(.team__item_active) { &:hover { top: 305px; } } &:not(.team__item) { &::after { position: absolute; content: ''; width: 100%; height: 100%; background-color: rgba(231, 76, 60, 0.5); border-radius: 50%; } } } &_4 { background-image: url(https://grimesco.de/team_1.jpg); top: 265px; left: 80%; &:not(.team__item_active) { &:hover { top: 245px; } } &:not(.team__item) { &::after { position: absolute; content: ''; width: 100%; height: 100%; background-color: rgba(231, 76, 60, 0.5); border-radius: 50%; } } } } } 
  <div class="section section_background_color-2 section_no_padding team"> <div class="heading heading_center team__heading"> <h4 class="heading__title heading_color_light">Case study</h4> <p class="heading__subtitle heading_color_grey"> It has survived not only five centuries, but also the leap scrambled it to make a type. </p> <div class="separator separator_color_white"></div> </div> <div class="team__graph"> <div class="container"> <div class="row"> <div class="team__item_1 team__item"> <span class="team__name">123123</span> <span class="team__spec">123123</span> </div> <div class="team__item team__item_2"> <span class="team__name">123123</span> <span class="team__spec">123123</span> </div> <div class="team__item team__item_3"> <span class="team__name">123123</span> <span class="team__spec">123123</span> </div> <div class="team__item team__item_4"> <span class="team__name">123123</span> <span class="team__spec">123123</span> </div> </div> </div> </div> </div>

    1 answer 1

    I see 4 solutions.

    1. Resize lines

    Make the line be resized too, then the pictures will be compressed along with the line.

    2. Using the formula.

    In fact, your HTML file about the line itself does not know anything, for it is just a picture. So that he can not track it and attach to it. Therefore, you can set the line with a mathematical formula - sin for example. And based on this formula, calculate the positioning of the elements. Then it will be necessary to output the line not with a picture but for example through SVG .

    3. Using SVG.

    SVG is a vector graphics format.

    SVG line format also stores information about all its points, so you can calculate the coordinates of a specific point based on PATH .

    You can attach elements (circles) directly to the SVG . There and animation on hover may be both. And do not have to count. SVG has many options for scaling graphics.

    4. Make a media query for many resolution options.

    Long, but to deal with technology or mathematics will not have to. I would not do that.

    Of all the options, I see the most promising option 1 as the simplest, and SVG as the most versatile.

    • The problem is that the line is only in png, together with a translucent background. I basically rendered a manual clip-path for the container, but I forgot that the border will not work for the line. Apparently you'll have to draw everything in svg with your hands. Through mq, I don’t want to do something unprofessional. Thank you very much for the answer. - Ivan
    • one
      On less , it is possible to create selectors automatically - recursively, there you can also choose a formula, and then manually do not have to register. mq generated automatically. I do not know Saas, but I think there is similar functionality there too. So I wouldn’t do it either, since SVG seems to be the optimal solution, I am writing here as a possible option through auto- mq . - Dmitry Polyanin
    • Are you talking about the function directive? I will do it via SVG, as I originally thought) Thank you for the addition. - Ivan
    • In less this loops - lesscss.org/features/#loops-feature - Dmitry Polyanin
    • one
      And in saas there is also a for - sass-lang.com/documentation/… - Dmitry Polyanin