How to align arrow with respective to the circle? - css

Question

I'm trying to align the arrow to the center with respective to the circle
How can I change the arrow direction to down arrow when it's in mobile view, So that the order of the image will be like one below other pointed with downwards arrow.
Below is the code which I have tried
img {
width: 32px;
height: 32px
}
.icon-holder {
background-color: #2E51FF;
width: 75px;
height: 75px;
border-radius: 75px;
line-height: 75px;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container-fluid p-4">
<div class="row text-center">
<div class="col">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 1</h4>
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<h2 class="mb-0 pt-3 font-weight-bolder">100+</h2>
<p class=" text-muted font-weight-bold">Properties Listed</p>
</div>
<div class="col my-auto">
<h1 class="">></h1>
</div>
<div class="col ">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 2</h4>
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<h2 class="mb-0 pt-3 font-weight-bolder">₱ 4.5 MN. </h2>
<p class=" text-muted font-weight-bold">Tokenized value of properties listed</p>
</div>
<div class="col my-auto">
<h1 class="">></h1>
</div>
<div class="col ">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 3</h4>
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<h2 class="mb-0 pt-3 font-weight-bolder"> 7 MN. +</h2>
<p class=" text-muted font-weight-bold">Token Traded Volume</p>
</div>
<div class="col my-auto">
<h1 class="">></h1>
</div>
<div class="col">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 4</h4>
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<h2 class="mb-0 pt-3 font-weight-bolder"> 10%</h2>
<p class=" text-muted font-weight-bold">Avg tokenization of properties listed</p>
</div>
</div>
</div>

Answer 1

I have restructured the div and added some bootstrap classes. Please adjust spacing accordingly. Hope it'll help you
img {
width: 32px;
height: 32px
}
.icon-holder {
background-color: #2E51FF;
width: 75px;
height: 75px;
border-radius: 75px;
line-height: 75px;
}
#media only screen and (max-width: 600px){
h1.arrow {
transform: rotate(90deg);
}
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container-fluid p-4">
<div class="row text-center">
<div class="col">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 1</h4>
<div class="d-flex align-items-center">
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<div>
<h1 class="arrow">></h1>
</div>
</div>
<h2 class="mb-0 pt-3 font-weight-bolder">100+</h2>
<p class=" text-muted font-weight-bold">Properties Listed</p>
</div>
<div class="col ">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 2</h4>
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<h2 class="mb-0 pt-3 font-weight-bolder">₱ 4.5 MN. </h2>
<p class=" text-muted font-weight-bold">Tokenized value of properties listed</p>
</div>
<div class="col my-auto">
<h1 class="">></h1>
</div>
<div class="col ">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 3</h4>
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<h2 class="mb-0 pt-3 font-weight-bolder"> 7 MN. +</h2>
<p class=" text-muted font-weight-bold">Token Traded Volume</p>
</div>
<div class="col my-auto">
<h1 class="">></h1>
</div>
<div class="col">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 4</h4>
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<h2 class="mb-0 pt-3 font-weight-bolder"> 10%</h2>
<p class=" text-muted font-weight-bold">Avg tokenization of properties listed</p>
</div>
</div>
</div>

Answer 2

you can use media query for arrow to rotate
#media only screen and (max-width: 600px) {
.arrow-image {
transform: rotate(90deg)
}
}
to center it you can use
display: block;
margin: auto;