Responsive dotted lines among the images

Question

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;
}

user_383904 · 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;
}

Responsive dotted lines among the images

1 Answers