title: Front-end approach to make content to be fixed near some place of image
body: <p>I need to build the website where the main design idea is that it has the path-like image going through all its blocks and content shall be tied to some points of that image. I inserted that image in head section and gave it absolute positioning.
  The issue is that when I start to change viewport width content become to scale and image as well breaking the points where image and content shall be on one line.
  example:
  1)the viewport width on which website initially built
  <a href="https://i.stack.imgur.com/Xi5p7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xi5p7.png" alt="the viewport width on which website initially built"></a></p>
  
  <p>2)decreased viewport
  <a href="https://i.stack.imgur.com/LO3zg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LO3zg.png" alt="decreased viewport"></a></p>
  
  <p>What is a proper approach to built responsive website keeping in mind that content shall be always nnear some points of the image.
  UPDATE, code added:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* head-section */
  #head-section{
      padding: 0 8%;
      /* background-image: url("img/animations/mainpage/animation.gif");    */
      background-repeat: no-repeat;
      background-position-x: 99.5%;
      background-position-y: 188%;
      background-size: 50%;
  }
  #menu{
      padding-top: 3%;
      width: 60%;
      text-align: left;
      font: Bold 1vw Montserrat;
      letter-spacing: 0;
      color: #261E3C;
  }
  #consultation-btn{
      background: #B9EFE6 0% 0% no-repeat padding-box;
      padding: 3%;
      width: auto
  }
  #heading-text{
      flex-direction: column;
      align-items: start;
      text-align: left;
      font: Bold 3vw Montserrat;
      letter-spacing: 1.55px;
      color: #261E3C;
  }
  #highlihted{
      background: #B9EFE6 0% 0% no-repeat padding-box;
      padding: 1%;
  }
  #subheading-text{
      text-align: left;
      font: 1.5vw Montserrat;
      letter-spacing: 0;
      color: #261E3C;
      margin: 5% 0;
      width: 60%;
  }
  #consult-btn{
      display: block;
      text-align: left;
      font: Bold 2vw Montserrat;
      letter-spacing: 0;
      color: #444D83;
      width: 85%;
  }
  #head-content{
      margin-bottom: 7%;
  }
  /* revolution section */
  .superheading{
      text-align: left;
      font: Bold 3vw Montserrat;
      letter-spacing: 1.55px;
      color: #261E3C;
  }
  .heading{
      text-align: left;
      font: Bold 2vw Montserrat;
      letter-spacing: 1.05px;
      color: #261E3C;
  }
  .description-text{
      text-align: left;
      font: 1.3vw Montserrat;
      letter-spacing: 0;
      color: #261E3C;
  }
  .features-item{
      background: #F4F3F6 0% 0% no-repeat padding-box;
      padding: 5% 2%;
      width: 35%;
      border-top-right-radius: 4em;
      margin-right: 15%;
      margin-bottom: 5%;
      margin-top: 10%;
      z-index: 999
  }
  .item-heading{
      text-align: left;
      font: Bold 1.5vw Montserrat;
      letter-spacing: 0;
      color: #261E3C;
      width: 70%;
  }
  .item-text{
      text-align: left;
      font: 1vw Montserrat;
      letter-spacing: 0;
      color: #261E3C;
      width: 70%;
  }
  .item-btn{
      text-align: left;
      font: 1vw Montserrat;
      letter-spacing: 0;
      color: #444D83;
  }
  #revolution-section-heading{
      margin-top: 23vw;
  }
  #revolution-section-superheading{
      margin-top: 28%;
  }
  /* stand out section */
  #stand-out-bullet{
      text-align: left;
      font: Bold 1.2vw Montserrat;
      letter-spacing: 0;
      color: #261E3C;
      margin-top: 11%;
  }
  #stand-out-bullet p {
      margin-top: 10%;
  }
  .service-feature{
      position: relative;
      text-align: left;
      font: Bold 1.2vw Montserrat;
      letter-spacing: 0;
      color: #261E3C;
  }
  .decorative-div{
      position: absolute;
      z-index: -99;
      width: 3em;
      height: 3em;
      background-color: #e6e6e6;
      border-top-right-radius: 1em;
  }
  .kyc-row{
      margin-top: 10%;
  }
  .learn-more{
      text-align: left;
      font: Bold 1.3vw Montserrat;
      letter-spacing: 0;
      color: #444D83;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="main-page" style='overflow: visible; position:relative; overflow: hidden'&gt;
          &lt;section id='head-section'&gt;
              &lt;div class='container'&gt;
                  &lt;div class='row flexing'&gt;
                      &lt;img class='img-fluid' src='img\assets\1. home\logo.svg'&gt;
                      &lt;div class='flexing' id='menu'&gt;
                          &lt;p&gt;Home&lt;/p&gt;
                          &lt;p&gt;Consulting&lt;/p&gt;
                          &lt;p&gt;Fintech Platform&lt;/p&gt;
                          &lt;p&gt;KYC&lt;/p&gt;
                          &lt;p id='consultation-btn'&gt;Get a consultation&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class='row flexing' id='head-content'&gt;
                      &lt;div class='flexing' style='flex-direction: column; align-items: flex-start; margin-top: 20%'&gt;
                          &lt;span id='heading-text' class='flexing'&gt;
                              &lt;span id='highlihted'&gt;Blockchain&lt;/span&gt;
                              &lt;span&gt;transformation consulting&lt;/span&gt;
                          &lt;/span&gt;
                          &lt;span id='subheading-text'&gt;
                              Understand the beneficial impact of blockchain on your organization.
                          &lt;/span&gt;
                          &lt;span class='flexing' id='consult-btn'&gt;
                              &lt;img class='img-fluid' src='img\assets\1. home\circle_btn.svg'&gt;
                              Get consultation
                          &lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;img class='img-fluid' style='position:absolute; width: 97%;left: 3vw;top: 17%; z-index: -999' src='img/big_line.gif'&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
          &lt;section id="revolution-section"&gt;
              &lt;div class='container'&gt;
                  &lt;div class='row flexing' id='revolution-section-superheading' style='justify-content: flex-start;'&gt;
                      &lt;p class='superheading' style='width: 60%; margin-left:10%'&gt;Join the next digital revolution.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class='row flexing' id='revolution-section-heading' style='justify-content: flex-start; padding-left: 31%'&gt;
                      &lt;p class='heading'&gt;DIGITAL TRANSFORMATION CONSULTING&lt;/p&gt;
                      &lt;p class="description-text" style='width: 60%'&gt;With 20 years of digital transformation experience, Thrupny offers structural and benefit-rich advice on strategy and delivery. We’re more than just a consulting platform; we deliver real results to clients across the world by aid in the implementation of technologically rich experiences.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class='row' style='padding-left: 31%'&gt;
                      &lt;div class='features-item' style='margin-top: 10%'&gt;
                          &lt;p class='item-heading'&gt;Stakeholder onboarding&lt;/p&gt;
                          &lt;p class='item-text'&gt;Align all stakeholders by drifting away from the traditional onboarding process.&lt;/p&gt;
                          &lt;span class='item-btn'&gt;Learn More&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div class='features-item' style='margin-top: 10%'&gt;
                          &lt;p class='item-heading'&gt;Stakeholder onboarding&lt;/p&gt;
                          &lt;p class='item-text'&gt;Align all stakeholders by drifting away from the traditional onboarding process.&lt;/p&gt;
                          &lt;span class='item-btn'&gt;Learn More&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div class='features-item'&gt;
                          &lt;p class='item-heading'&gt;Stakeholder onboarding&lt;/p&gt;
                          &lt;p class='item-text'&gt;Align all stakeholders by drifting away from the traditional onboarding process.&lt;/p&gt;
                          &lt;span class='item-btn'&gt;Learn More&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div class='features-item'&gt;
                          &lt;p class='item-heading'&gt;Stakeholder onboarding&lt;/p&gt;
                          &lt;p class='item-text'&gt;Align all stakeholders by drifting away from the traditional onboarding process.&lt;/p&gt;
                          &lt;span class='item-btn'&gt;Learn More&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
          &lt;section id="stand-out-section"&gt;
              &lt;div class='container'&gt;
                  &lt;div class="row" style='margin-top: 25%'&gt;
                      &lt;p class='superheading' style='width: 60%; margin-left:10%'&gt;How we stand out&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="row flexing" style='justify-content:flex-start; align-items: flex-start; margin-top: 15vw'&gt;
                      &lt;img class='img-fluid' style='width: 20%' src='img\blue_chain.svg'&gt;
                      &lt;div style='width: 60%; padding-top: 2%; margin-left:2%'&gt;
                          &lt;p class='heading'&gt;BLOCKCHAIN BASED FINTECH PLATFORM&lt;/p&gt;
                          &lt;br&gt;
                          &lt;p class="description-text" &gt;Enable smooth financial transactions through dependable blockchain technologies that utilize KYC identification capabilities to ensure the utmost security and scalable solutions.&lt;/p&gt;
                          &lt;br&gt;
                          &lt;div id='stand-out-bullet' class="flexing" style='flex-direction: column; align-items: flex-start;'&gt;
                              &lt;p style='margin-top: 0 '&gt;Tokenised Fund Raising Platform&lt;/p&gt;
                              &lt;p&gt;Token Distribution Platform specifically for non token holders&lt;/p&gt;
                              &lt;p&gt;Security Token Robot Trustee Platform&lt;/p&gt;
                          &lt;div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>