Custom horizontal timeline

[Monsieur R]

Hello everyone,

I hope I'm in the right section. I would like to create the following timeline for my step by step section: 
 

But when I use it on my shopify website, it looks vertical and the blue line between the sections disappeared. 





This is my first time using HTML & CSS and I don't know how to fix it. I think that the HTML section is Ok but not the CSS.

Thank you in advance if you can help, do not hesitate if you have questions.

Yours truly



 

• Here is the CSS code i'm using :

$outline-width: 0;
$break-point: 500px;

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  font-family: lato;
}

$gray-base:     #999999;
$brand-primary: #3498DB; //Zen Blue

.section-header {
  color: $brand-primary;
  font-weight: 400;
  font-size: 1.4em;
}

.steps-header {
  @extend .section-header;
  margin-bottom: 20px;  
  text-align: center;
}
.steps-timeline {
  outline: 1px dashed rgba(red, $outline-width);
  
  @media screen and (max-width: $break-point) {
    border-left: 2px solid $brand-primary;
    margin-left: 25px;
  }
  
  @media screen and (min-width: $break-point) {
    border-top: 2px solid $brand-primary;
    padding-top: 20px;
    margin-top: 40px;
    margin-left: 16.65%;
    margin-right: 16.65%;
  }
  
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}
.steps-one,
.steps-two,
.steps-three {
  outline: 1px dashed rgba(green, $outline-width);
  
  @media screen and (max-width: $break-point) {
    margin-left: -25px;
  }
  
  @media screen and (min-width: $break-point) {
    float: left;
    width: 33%;  
    margin-top: -50px;
  }
}
.steps-one,
.steps-two {
  @media screen and (max-width: $break-point) {
    padding-bottom: 40px;
  }
}
.steps-one {
  @media screen and (min-width: $break-point) {
    margin-left: -16.65%;
    margin-right: 16.65%;
  }
}
.steps-two {
  
}
.steps-three {
  @media screen and (max-width: $break-point) {
    margin-bottom: -100%;
  }
  @media screen and (min-width: $break-point) {
    margin-left: 16.65%;
    margin-right: -16.65%;
  }
}

.steps-img {
  display: block;
  margin: auto;
  width: 50px;
  height: 50px;
  border-radius: 50%; 
  
  @media screen and (max-width: $break-point) {
    float: left;
    margin-right: 20px;
  }
}

.steps-name,
.steps-description {
  margin: 0;
}
.steps-name {
  @extend .section-header;
  
  @media screen and (min-width: $break-point) {
    text-align: center;
  }
}
.steps-description {
  overflow: hidden;
  
  @media screen and (min-width: $break-point) {
    text-align: center;
  }
}
 

 

• Here is the HTML :

  <!-- STEPS -->
  <section id="Steps" class="steps-section">

    <h2 class="steps-header">
      Voici le processus étape par étape :
    </h2>

    <div class="steps-timeline">

      <div class="steps-one">
        <img class="steps-img" src="https://image.ibb.co/fYiWaf/one.png" alt="" />
        <h3 class="steps-name">
          TEST 1
        </h3>
        <p class="steps-description">
         TEST 1
        </p>
      </div>

      <div class="steps-two">
        <img class="steps-img" src="https://image.ibb.co/ipRpT0/two.png" alt="" />
        <h3 class="steps-name">
         TEST 2
        </h3>
        <p class="steps-description">
           TEST 2
        </p>
      </div>

      <div class="steps-three">
        <img class="steps-img" src="https://image.ibb.co/kufZBL/three.png" alt="" />
        <h3 class="steps-name">
          TEST 3
        </h3>
        <p class="steps-description">
           TEST 3
        </p>
      </div>

    </div><!-- /.steps-timeline -->

  </section>

 

 

 

 

 

 

 

 

85/5000

 

thank you in advance for your help, do not hesitate if you have questions. Yours truly