What is the best way to position an arrow in relation to a circle?

  1. I'm struggling to center the arrow in relation to the circle
  2. How can I switch the arrow direction to point downwards when viewed on mobile, so that the images are stacked vertically with downward arrows?

Here is the code snippet that I have experimented with:

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>
csstwitter-bootstrapbootstrap-4

Answer №1

I have made enhancements to the division and applied bootstrap styles for better alignment. Kindly adjust margins accordingly. Hopefully, this will be beneficial for 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">&#8369; 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

To make the arrow rotate, apply a media query like this:

@media only screen and (max-width: 600px) {
  .arrow-image {
     transform: rotate(90deg);
   }
}

For centering the arrow, use the following CSS properties:

display: block;
margin: auto;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing CSS3 Pseudo Elements for Styling a Graph

I'm struggling to achieve the desired look of my ancestor chart using an unordered list format. Initially, I borrowed code from CSS3 Family Tree, but found it to be more like an organizational chart rather than a family tree. For testing purposes, he ...

htmlcsspseudo-element

Changing the Div Class in Master page from a Child page is a straightforward process that involves modifying

I am trying to dynamically change the style of a div element in the master page from my child page. This is the code I am using: protected void ShowMsgText(int MsgID) { HtmlGenericControl MsgInner; MsgInner = ((HtmlGenericControl) ...

asp.netcssmaster-pages

Maintain the aspect ratio of an image when placing it in a square container

Looking for a way to create a CSS grid with non-square random sized images? I need help filling all the space inside a fixed size div. Any suggestions? Check out my example: (blue represents the fixed size div and red shows the image inside it) ...

javascriptjqueryhtmlcss

Encountering issues with the functionality of my Bootstrap navbar

After diving into the world of bootstrap, I encountered some challenges with the navigation bar in mobile view. Despite adding a navbar and a toggle button, it doesn't seem to be functioning correctly. Following tutorials and examples meticulously, bu ...

htmlcssbootstrap-4

Use CSS to apply hover effects to multiple sections of text at the same time

Is there a way in CSS to apply the hover state to one part of HTML text when another part is hovered over, both sharing the same class? I have a block of text in HTML that is broken down into individual words, each word linked to a specific CSS class. It ...

htmlcss

How to keep the bottom of a CSS {position:sticky; top:0} element within the viewport without using JavaScript

I am working on creating a dashboard frame using Bootstrap 5, and I aim to achieve the functionality shown in these two images: Here is my current setup: <html> <body> <div class="pretoolbar">pretoolbar (non-essential inf ...

cssflexboxcss-positionstickybootstrap-5

How to insert an image into a div element in HTML5

I have a basic div element shown below: <div class="avatar"> <img src="http://quickshare.my3gb.com/download/testpic.jpg" /> </div> (The original image size is 216 * 216 pixels) and the CSS I am using is as follows: .avatar { float: r ...

c#jqueryhtmlcssasp.net-mvc-4

Selecting multiple items from a grid using the Ionic framework

I am looking to create a grid of category images in Ionic framework, where users can select multiple categories and send their values to the controller. However, I'm unsure about how to make this happen with Ionic framework. Below is the view I curre ...

htmlcssangularjsionic-frameworkmultiple-select

Automatic closing of multile- vel dropdowns in Bootstrap is not enabled by default

I have successfully implemented bootstrap multilevel dropdowns. However, I am facing an issue where only one child is displayed at a time. <div class="container"> <div class="dropdown"> <button class="btn btn-default dropdown-to ...

javascripthtmlcsstwitter-bootstrapdropdown

Creating a three-column layout in CSS with only two divs

Struggling to format a page with 3 columns using only 2 divs for the contents. One div affects just the end of the content, while the other impacts all of it. Currently, the layout is like this: This is the first content-------------------This is the se ...

css

Using CSS pseudo elements before and after on an input range

I am looking to create a slider that dynamically displays boundaries. After searching online, I came across some code that I modified to suit my needs. This code uses only HTML and CSS and looks great in Chrome, but not so good in Firefox (I also tried it ...

csshtmlpseudo-element

When I attempt to incorporate multiple sliders on a single page, I encounter difficulties in determining the accurate stopping position if the number of slides varies

I am having trouble setting the correct stop position for sliders with different numbers of slides on a page. When I have the same number of slides in each slider, everything works fine. However, I need to have a different number of slides in each slider ...

javascriptjqueryhtmlcss

reason behind text styling: thick 12 pixels height with line spacing of 25 pixels using "Arial" font

Question about CSS Size: Understanding font sizes in CSS {font: 14px/24px Arial, Helvetica, sans-serif} I've noticed some CSS code like this on the website .selector {font: bold 12px/25px "Arial";} I know that 'bold' refers to font w ...

css

What is the best approach to have a single table column span across multiple columns on a page rather than having one column per page in ASP.NET MVC using C#?

Currently, I am working on creating a PDF view page for product labels using ASP.NET MVC in C#. The goal is to have two columns on the page, with 5 rows in each column, totaling to 10 labels per page. When specific products are selected in a form, the form ...

c#htmlcssasp.netasp.net-mvc

Assign a distinct color to each character of the Russian alphabet within a specified text using CSS and/or JavaScript

My experiment involves testing the concept of "induced synesthesia" by assigning different colors to individual characters in text. I plan to map each character in the Russian alphabet to a specific color, for example, A is red, B is blue, and so on, resul ...

javascripthtmlcss

Combining Node and React: Using CSS Class Names with Hyphens

Currently, my project utilizes react-starter-kit and includes several react components, each with its own styling file (scss). Every component imports the styling file at the top like this: import s from './Header.scss'; When it comes to using ...

cssnode.jsreactjssassbabeljs

"Encountering difficulties with certain images not loading in the keyframe slide show feature on IOS

Ensure that the image in the slide show is preloaded, followed by preloading each additional image before transitioning to the next key frame. Finally, preload the original image for the final display. I even attempted changing the last image, but encounte ...

cssiossafarislideshowkeyframe

Is it possible to adjust the height of input fields in MUI Reactjs?

Having trouble adjusting the height of input textfields using in-line css. <FormControl sx={{ "& .MuiOutlinedInput-notchedOutline": { borderColor: "blue", }, "&.Mui-focused .MuiOutlinedInpu ...

cssreactjsmaterial-ui

React Router version 6.4.5, automatic redirection upon loading the page

Seeking assistance with setting up redirects. Below are snippets of the code. index.js const router = createBrowserRouter([ { //Defining App as the root element... path: "/", loader: () => { }, element: <App/>, ...

javascripthtmlcssreactjsreact-router

Is the embedded audio player not showing up on the screen?

I've been trying to add music to my blog page using the Billy audio player. I have successfully done this in the past, but for some reason, the player is not appearing on the finished page (I checked on both FireFox and Google Chrome) and I can't ...

htmlcssembed