Creating connected circles - html

Question

I need to create this image:
It contains circles attached with lines. I drew in the red boxes to show that they are divs because when it's displayed on mobile it should look like this:
I've tried doing what this post says but it doesn't work for me since the li's woudln't be in the same div.
This is my code:
.steps {
max-width: 1170px;
margin: auto;
overflow: auto;
}
.step-1,
.step-2,
.step-3,
.step-4 {
width: 25%;
float: left;
}
<div class="steps">
<div class="step-1">
<div class="step-image">
<img src="step1.jpg">
</div>
<div class="step-title">Measure Your Space</div>
<div class="step-number">1
</div>
</div>
<div class="step-2">
<div class="step-image">
<img src="step2.jpg">
</div>
<div class="step-title">Your Kitchen is Designed</div>
<div class="step-number">2</div>
</div>
<div class="step-3">
<div class="step-image">
<img src="step3.jpg">
</div>
<div class="step-title">Your Materials are Shipped</div>
<div class="step-number">3</div>
</div>
<div class="step-4">
<div class="step-image">
<img src="step4.jpg">
</div>
<div class="step-title">Start contruction of your dream kitchen</div>
<div class="step-number">4</div>
</div>
</div>
How do I create the circles with lines connecting them?

Answer 1

Following solution is for version with lines.
To remove lines place content: none; under media-query.
section {
display: inline-block;
width: 25%;
text-align: center;
}
div {
margin: .5em;
border: 1px solid red;
padding: .5em;
position: relative;
}
a {
display: inline-block;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
border: 1px solid;
border-radius: 50%;
background: silver;
}
a:before, a:after {
content: "";
position: absolute;
border-top: 1px solid;
margin-top: 1em;
z-index: -1;
}
a:before {
margin-left: -1px;
left: -.5em;
right: 50%;
}
a:after {
margin-right: -1px;
left: 50%;
right: -.5em;
}
section:first-child a:before,
section:last-child a:after {
content: none;
}
<main>
<section>
<div>
<p>Some content</p>
<a>1</a>
</div>
</section><section>
<div>
<p>Some content</p>
<a>2</a>
</div>
</section><section>
<div>
<p>Some content</p>
<a>3</a>
</div>
</section><section>
<div>
<p>Some content</p>
<a>4</a>
</div>
</section>
</main>

Answer 2

Here is a sample, with a minimal markup, and for the marker and line the ::after and ::before pseudo element is used (starting from the 2:nd position)
div.connected {
counter-reset: num;
}
div.connected div {
float: left;
width: calc(25% - 22px);
position: relative;
text-align: center;
margin: 0 10px;
padding: 80px 0 10px 0;
border: 1px solid #eee;
background: url(http://placehold.it/60/f00) no-repeat top 10px center;
}
div.connected div::after {
display: block;
counter-increment: num;
content: counter(num);
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.5em;
border-radius: 50%;
border: 1px solid gray;
margin: 0 auto;
}
div.connected div ~ div::before {
content: '';
position: absolute;
width: calc(100% - 1.5em + 22px);
right: calc(50% + 0.75em);
height: 1px;
background-color: gray;
bottom: calc(.75em + 10px);
z-index: -1;
}
div.connected span {
display: inline-block;
padding-bottom: 10px;
}
#media screen and (max-width: 600px) {
div.connected div {
width: calc(50% - 22px);
}
div.connected div:nth-child(n+3) {
margin-top: 20px;
}
div.connected div:nth-child(3)::before {
display: none;
}
}
<div class="connected">
<div>
<span>Some text here</span>
</div>
<div>
<span>Some text here</span>
</div>
<div>
<span>Some text here</span>
</div>
<div>
<span>Some text here</span>
</div>
</div>
Here is an updated version that solves the misalignment when an item have longer text
div.connected {
display: flex;
flex-wrap: wrap;
counter-reset: num;
}
div.connected div {
float: left;
width: calc(25% - 22px);
position: relative;
text-align: center;
margin: 0 10px;
padding: 80px 0 10px 0;
border: 1px solid #eee;
background: url(http://placehold.it/60/f00) no-repeat top 10px center;
}
div.connected div::after {
display: block;
counter-increment: num;
content: counter(num);
position: absolute;
left: calc(50% - 0.75em - 1px);
bottom: 10px;
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.5em;
border-radius: 50%;
border: 1px solid gray;
}
div.connected div ~ div::before {
content: '';
position: absolute;
width: calc(100% - 1.5em + 22px);
right: calc(50% + 0.75em);
height: 1px;
background-color: gray;
bottom: calc(.75em + 10px);
z-index: -1;
}
div.connected span {
display: inline-block;
padding-bottom: 30px;
}
#media screen and (max-width: 600px) {
div.connected div {
width: calc(50% - 22px);
}
div.connected div:nth-child(n+3) {
margin-top: 20px;
}
div.connected div:nth-child(3)::before {
display: none;
}
}
<div class="connected">
<div>
<span>Some text here</span>
</div>
<div>
<span>Some text here</span>
</div>
<div>
<span>Some long long long text here</span>
</div>
<div>
<span>Some text here</span>
</div>
</div>
Updated, being asked how to move text below the circles, so here is one way (see notes in CSS)
Note, since absolute positioning is used for the connectors/circles, and as longer text can wrap, one might need to adjust the bottom distance (50px) using the existing #media query.
div.connected {
display: flex;
flex-wrap: wrap;
counter-reset: num;
}
div.connected div {
float: left;
width: calc(25% - 22px);
position: relative;
text-align: center;
margin: 0 10px;
/* padding: 80px 0 10px 0; changed */
padding: 120px 0 10px 0;
border: 1px solid #eee;
background: url(http://placehold.it/60/f00) no-repeat top 10px center;
}
div.connected div::after {
display: block;
counter-increment: num;
content: counter(num);
position: absolute;
left: calc(50% - 0.75em - 1px);
/* bottom: 10px; changed */
bottom: 50px;
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.5em;
border-radius: 50%;
border: 1px solid gray;
}
div.connected div~div::before {
content: '';
position: absolute;
width: calc(100% - 1.5em + 22px);
right: calc(50% + 0.75em);
height: 1px;
background-color: gray;
/* bottom: calc(.75em + 10px); changed */
bottom: calc(.75em + 50px);
z-index: -1;
}
div.connected span {
display: inline-block;
}
#media screen and (max-width: 600px) {
div.connected div {
width: calc(50% - 22px);
}
div.connected div:nth-child(n+3) {
margin-top: 20px;
}
div.connected div:nth-child(3)::before {
display: none;
}
}
<div class="connected">
<div>
<span>Some text here</span>
</div>
<div>
<span>Some text here</span>
</div>
<div>
<span>Some long long long text here</span>
</div>
<div>
<span>Some text here</span>
</div>
</div>

Answer 3

Given the markup you have, one simple solution would be to align the horizontal line (the :after pseudo-element of .step-number) relative to .step-# div. Here's how:
.step-1,
.step-2,
.step-3,
.step-4 {
...
/* Set position of step divs to be relative. */
position: relative;
}
.step-number:after {
/* Absolutely position this to the bottom center of step-#.
15px is the radius of step-number.
A 100% width, and a 50% left expands the line's
length to the center of the next step-#. */
position: absolute;
left: 50%;
bottom: 15px;
margin-left: 15px;
...
}
.step-number {
/* A fixed width of 30px allows us to correctly position the line. */
border-radius: 20px;
width: 30px;
height: 30px;
...
}
.step-number {
border-radius: 20px;
width: 30px;
height: 30px;
line-height: 30px;
border: 1px #AAA solid;
text-align: center;
display: inline-block;
background-color: #FFF;
}
/*
Absolutely position this to the bottom center of step-#.
15px is the radius of step-number.
A 100% width, and a 50% left expands the line's
length to the center of the next step-#.
*/
.step-number:after {
content: ' ';
position: absolute;
left: 50%;
margin-left: 15px;
bottom: 15px;
width: 100%;
height: 1px;
background-color: #AAA;
}
/* Hide the line after the last step */
.step-4 .step-number:after {
display: none;
}
.steps {
max-width: 1170px;
margin: auto;
overflow: auto;
}
.step-title {
min-height: 80px;
}
.step-1,
.step-2,
.step-3,
.step-4 {
width: 22%;
vertical-align: top;
display: inline-block;
text-align: center;
/* Set position of step divs to be relative. */
position: relative;
border: 1px #FAA solid;
}
#media screen and (max-width: 400px) {
.step-number:after {
content: none;
display: none;
}
}
<div class="steps">
<div class="step-1">
<div class="step-image">
<img src="https://placehold.it/100x100">
</div>
<div class="step-title">Measure Your Space</div>
<div class="step-number">1
</div>
</div>
<div class="step-2">
<div class="step-image">
<img src="https://placehold.it/100x100">
</div>
<div class="step-title">Your Kitchen is Designed</div>
<div class="step-number">2</div>
</div>
<div class="step-3">
<div class="step-image">
<img src="https://placehold.it/100x100">
</div>
<div class="step-title">Your Materials are Shipped</div>
<div class="step-number">3</div>
</div>
<div class="step-4">
<div class="step-image">
<img src="https://placehold.it/100x100">
</div>
<div class="step-title">Start contruction of your dream kitchen</div>
<div class="step-number">4</div>
</div>
</div>
To keep up with small screens, you can add a media query to hide the horizontal lines, once the .step-#s span to multiple rows.
#media screen and (max-width: 400px) {
.step-number:after {
content: none;
display: none;
}
}

Answer 4

.steps {
max-width: 1170px;
margin: auto;
overflow: auto;
box-sizing:border-box;
}
.step-1,
.step-2,
.step-3,
.step-4 {
width: 90px;
height:200px;
float: left;
border:2px solid #ff0000;
box-sizing:border-box;
text-align:center;
position:relative;
margin:5px;
z-index:999;
}
img{
width:50%;
height:50px;
margin:auto;
margin-top:10px
}
.step-number{
border-radius: 50%;
border: 1px solid #000;
position: absolute;
bottom: 20px;
right: 43%;
padding: 4px;
z-index:999;
}
hr{
position: absolute;
width: 282px;
height: 1px;
right: 53px;
bottom: 23px;
z-index: 990;
}
<div class="steps">
<div class="step-1">
<div class="step-image">
<img src="https://i.stack.imgur.com/ElI1w.jpg">
</div>
<div class="step-title">Measure Your Space</div>
<div class="step-number">1
</div>
</div>
<div class="step-2">
<div class="step-image">
<img src="https://i.stack.imgur.com/ElI1w.jpg">
</div>
<div class="step-title">Your Kitchen is Designed</div>
<div class="step-number">2</div>
</div>
<div class="step-3">
<div class="step-image">
<img src="https://i.stack.imgur.com/ElI1w.jpg">
</div>
<div class="step-title">Your Materials are Shipped</div>
<div class="step-number">3</div>
</div>
<div class="step-4">
<div class="step-image">
<img src="https://i.stack.imgur.com/ElI1w.jpg">
</div>
<div class="step-title">Start contruction of your dream kitchen</div>
<div class="step-number">4</div>
<hr/>
</div>
</div>