Responsive dotted lines among the images

I’m trying to create a responsive dots connecting among the images like below. I’m able to achieve this with CSS, but the layout is collapsing when I tried to change the image widths or parent div width. How can I make this layout work for all screens and image dimensions?

Here is my code link: https://jsfiddle.net/SampathPerOxide/q2yab607/29/

.dotted-line,
.dotted-line1 {
  display: flex;
}

.over {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dotted-line::after {
  content: ".......";
  letter-spacing: 3px;
  font-size: 30px;
  color: #9cbfdb;
  display: table-cell;
  vertical-align: middle;
  padding-left: 1px;
}

.dotted-line1::before {
  content: "........";
  letter-spacing: 3px;
  font-size: 30px;
  color: #9cbfdb;
  display: table-cell;
  vertical-align: middle;
  padding-right: 1px;
}

.top:before {
  transform: rotate(90deg);
  content: "........";
  letter-spacing: 3px;
  font-size: 30px;
  color: #9cbfdb;
  position: absolute;
  top: 5em;
  margin-left: 0.5em;
}

<div style="width:90px;margin:0px auto;">
  <div style="  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
" class="top">
    <img src="https://i.pinimg.com/736x/39/4b/f6/394bf6e1c3f2a7351105290ef9fe9dd1.jpg" style="width:100px;">

  </div>
  <br/><br/><br/>
  <div class="over">
    <div style="" class="dotted-line">
      <img src="https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLS.jpg" style="width:100px;">
    </div>
    <div style="">
      <h4 style="text-align:center;padding:10px;">
        Choose
      </h4>
    </div>
    <div style="" class="dotted-line1">
      <img src="https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLS.jpg" style="width:100px;">
    </div>

  </div>



</div>

Answer

I would go for

display flex to easily arrange the items inside a flexbox
Use a repeated background-image with radial-gradient to achieve repeated responsive dots

* {
  margin: 0;
  box-sizing: border-box;
}

h4 {
  padding: 1em;
}

.flex {
  display: flex;
}

.flex.col {
  flex-direction: column;
}

.flex.center {
  justify-content: center;
}

.grow {
  flex-grow: 1;
}

.dots-h,
.dots-v {
  flex-grow: 1;
  background-image: radial-gradient(1px 1px at center, #888 1px, transparent 1px);
}

.dots-h {
  height: 1em;
  background-repeat: repeat-x;
  background-size: 10px 1em;
  margin: auto 0;
}

.dots-v {
  width: 1em;
  background-repeat: repeat-y;
  background-size: 1em 10px;
  margin: 0 auto;
}

<div>
  <div class="flex center">
    <img src="https://picsum.photos/id/1/100/100">
  </div>
  <div class="flex center">
    <img src="https://picsum.photos/id/2/100/100">
    <div class="dots-h"></div>
    <div class="flex col center">
      <div class="dots-v"></div>
      <h4>Choose</h4>
      <div class="grow"><!-- Just a spacer --></div>
    </div>
    <div class="dots-h"></div>
    <img src="https://picsum.photos/id/9/100/100">
  </div>
</div>

Advertisement

Answer