skip to Main Content

I want to replicate the following design provided by our UI/IX designer.

enter image description here

I am having a hard time positioning the circular part of the image at the center. (The vertical line and the circular part are two different images)

I tried using the padding-top on the "even part of the divs" and after few hit and trials, I replicated the design on "my device".

<!-- Sorry for bad naming conventions. Also, Bootstrap V5.3.0-aplha1 is being Used-->
    <style>
      .cols:nth-of-type(even) {
        padding-top: 17rem;
      }
    </style>
    <body>
        <div class="container text-center">
          <div class="row row-cols-1 row-cols-md-3 row-cols-lg-6">
            <div class="cols">
              <div class="row row-cols-1 g-0">
                <div class="col">
                  <div class="card">
                    <div class="card-body">
                      <h3>CDR Report Writing</h3>
                    </div>
                  </div>
                </div>
                <div class="col">
                  <img src="./img/line-service.svg" alt="" />
                </div>
                <div class="col">
                  <img src="./img/circle-service.svg" alt="" />
                </div>
              </div>
            </div>
            <div class="cols">
              <div class="row row-cols-1 g-0">
                <div class="col">
                  <img src="./img/circle-service.svg" alt="" />
                </div>
                <div class="col">
                  <img src="./img/line-service.svg" alt="" />
                </div>
                <div class="col">
                  <div class="card">
                    <div class="card-body">
                      <h3>CDR Report Writing</h3>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="cols">
              <div class="row row-cols-1 g-0">
                <div class="col">
                  <div class="card">
                    <div class="card-body">
                      <h3>CDR Report Writing</h3>
                    </div>
                  </div>
                </div>
                <div class="col">
                  <img src="./img/line-service.svg" alt="" />
                </div>
                <div class="col">
                  <img src="./img/circle-service.svg" alt="" />
                </div>
              </div>
            </div>
            <div class="cols">
              <div class="row row-cols-1 g-0">
                <div class="col">
                  <img src="./img/circle-service.svg" alt="" />
                </div>
                <div class="col">
                  <img src="./img/line-service.svg" alt="" />
                </div>
                <div class="col">
                  <div class="card">
                    <div class="card-body">
                      <h3>CDR Report Writing</h3>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="cols">
              <div class="row row-cols-1 g-0">
                <div class="col">
                  <div class="card">
                    <div class="card-body">
                      <h3>CDR Report Writing</h3>
                    </div>
                  </div>
                </div>
                <div class="col">
                  <img src="./img/line-service.svg" alt="" />
                </div>
                <div class="col">
                  <img src="./img/circle-service.svg" alt="" />
                </div>
              </div>
            </div>
            <div class="cols">
              <div class="row row-cols-1 g-0">
                <div class="col">
                  <img src="./img/circle-service.svg" alt="" />
                </div>
                <div class="col">
                  <img src="./img/line-service.svg" alt="" />
                </div>
                <div class="col">
                  <div class="card">
                    <div class="card-body">
                      <h3>CDR Report Writing</h3>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
     </body>

But the problem here is that, the value given on the padding-top works only on "my device". If I view the work on "other device" then the positioning will be all wrong.

Design on My Device:

enter image description here

Design on Other Device:

enter image description here

What other methods can I use to replicate the given design responsively on all large devices (Width more than 991px)?. You can skip worrying about devices for width less than 991px. I already have other plans for that.

P.S: Codesandbox link of my demo code

2

Answers


  1. You can try this way:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CDR Services</title>
        <link
          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
          crossorigin="anonymous"
        />
        <!-- Sorry for bad naming conventions.-->
        <!-- <style>
          .cols:nth-of-type(even) {
            padding-top: 18rem;
          }
        </style> -->
      </head>
      <body>
        <main>
          <section class="cdr-services">
            <div class="container text-center">
              <div class="row row-cols-1 row-cols-md-3 row-cols-lg-6">
                <div class="cols">
                  <div class="col">
                    <div class="card">
                      <div class="card-body">
                        <h3>CDR Report Writing</h3>
                      </div>
                    </div>
                  </div>
                  <div class="col">
                    <img src="./img/line-service.svg" alt="" />
                  </div>
                </div>
                <div class="cols">
                  <div class="col"></div>
                </div>
                <div class="cols">
                  <div class="col">
                    <div class="card">
                      <div class="card-body">
                        <h3>CDR Report Writing</h3>
                      </div>
                    </div>
                  </div>
                  <div class="cols">
                    <div class="col"></div>
                  </div>
                  <div class="col">
                    <img src="./img/line-service.svg" alt="" />
                  </div>
                </div>
                <div class="cols">
                  <div class="col"></div>
                </div>
                <div class="cols">
                  <div class="col">
                    <div class="card">
                      <div class="card-body">
                        <h3>CDR Report Writing</h3>
                      </div>
                    </div>
                  </div>
                  <div class="col">
                    <img src="./img/line-service.svg" alt="" />
                  </div>
                </div>
              </div>
    
              <!-- ---------------------------------------- -->
    
              <div class="row row-cols-1 row-cols-md-3 row-cols-lg-6">
                <div class="cols">
                  <div class="row row-cols-1 g-0">
                    <div class="col">
                      <img src="./img/circle-service.svg" alt="" />
                    </div>
                  </div>
                </div>
                <div class="cols">
                  <div class="row row-cols-1 g-0">
                    <div class="col">
                      <img src="./img/circle-service.svg" alt="" />
                    </div>
                  </div>
                </div>
                <div class="cols">
                  <div class="row row-cols-1 g-0">
                    <div class="col">
                      <img src="./img/circle-service.svg" alt="" />
                    </div>
                  </div>
                </div>
                <div class="cols">
                  <div class="row row-cols-1 g-0">
                    <div class="col">
                      <img src="./img/circle-service.svg" alt="" />
                    </div>
                  </div>
                </div>
                <div class="cols">
                  <div class="row row-cols-1 g-0">
                    <div class="col">
                      <img src="./img/circle-service.svg" alt="" />
                    </div>
                  </div>
                </div>
                <div class="cols">
                  <div class="row row-cols-1 g-0">
                    <div class="col">
                      <img src="./img/circle-service.svg" alt="" />
                    </div>
                  </div>
                </div>
              </div>
    
              <!-- ---------------------------------------- -->
    
              <div class="row row-cols-1 row-cols-md-3 row-cols-lg-6">
                <div class="cols">
                  <div class="col"></div>
                </div>
                <div class="cols">
                  <div class="col">
                    <img src="./img/line-service.svg" alt="" />
                  </div>
                  <div class="col">
                    <div class="card">
                      <div class="card-body">
                        <h3>CDR Report Writing</h3>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="cols">
                  <div class="col"></div>
                </div>
                <div class="cols">
                  <div class="col">
                    <img src="./img/line-service.svg" alt="" />
                  </div>
                  <div class="col">
                    <div class="card">
                      <div class="card-body">
                        <h3>CDR Report Writing</h3>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="cols">
                  <div class="col"></div>
                </div>
                <div class="cols">
                  <div class="col">
                    <img src="./img/line-service.svg" alt="" />
                  </div>
                  <div class="col">
                    <div class="card">
                      <div class="card-body">
                        <h3>CDR Report Writing</h3>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </main>
        <script
          src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
          crossorigin="anonymous"
        ></script>
      </body>
    </html>
    

    enter image description here

    Login or Signup to reply.
  2. try this. this is much more optimized.. i removed unnecessary codes.

    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CDR Services</title>
        <link
          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
          crossorigin="anonymous"
        />
      </head>
      <body>
        <main>
          <section class="cdr-services">
            <div class="container text-center">
              <div class="row row-cols-1 row-cols-md-3 row-cols-lg-6">
                <div class="col">
                  <div class="card">
                    <div class="card-body">
                      <h3>CDR Report Writing</h3>
                    </div>
                  </div>
                  <img src="./img/line-service.svg" alt="" />
                </div>
                <div class="col"></div>
                <div class="col">
                  <div class="card">
                    <div class="card-body">
                      <h3>CDR Report Writing</h3>
                    </div>
                  </div>
                  <div class="col"></div>
                    <img src="./img/line-service.svg" alt="" />
                </div>
                <div class="col"></div>
                <div class="col">
                  <div class="card">
                    <div class="card-body">
                      <h3>CDR Report Writing</h3>
                    </div>
                  </div>
                  <img src="./img/line-service.svg" alt="" />
                </div>
              </div>
              <!-- ---------------------------------------- -->
              <div class="row row-cols-1 row-cols-md-3 row-cols-lg-6">
                <div class="col">
                  <img src="./img/circle-service.svg" alt="" />
                </div>
                <div class="col">
                  <img src="./img/circle-service.svg" alt="" />
                </div>
                <div class="col">
                  <img src="./img/circle-service.svg" alt="" />
                </div>
                <div class="col">
                  <img src="./img/circle-service.svg" alt="" />
                </div>
                <div class="col">
                  <img src="./img/circle-service.svg" alt="" />
                </div>
                <div class="col">
                  <img src="./img/circle-service.svg" alt="" />
                </div>
              </div>
              <!-- ---------------------------------------- -->
              <div class="row row-cols-1 row-cols-md-3 row-cols-lg-6">
                <div class="col"></div>
                <div class="col">
                  <img src="./img/line-service.svg" alt="" />
                  <div class="card">
                    <div class="card-body">
                      <h3>CDR Report Writing</h3>
                    </div>
                  </div>
                </div>
                <div class="col"></div>
                <div class="col">
                  <img src="./img/line-service.svg" alt="" />
                  <div class="card">
                    <div class="card-body">
                      <h3>CDR Report Writing</h3>
                    </div>
                  </div>
                </div>
                <div class="col"></div>
                <div class="cols">
                  <img src="./img/line-service.svg" alt="" />
                  <div class="card">
                    <div class="card-body">
                      <h3>CDR Report Writing</h3>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </main>
        <script
          src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
          crossorigin="anonymous"
        ></script>
      </body>
    </html>
    
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search