Flexbox, mobile responsive

Question

how can i make this flexbox responsive with mobile? i would like the same result on mobile screen like the desktop version, i know the issue is caused by the responsivness of the flexbox and the mobile screensize, but how would I fix something like this? I think it has to do with the width of the flexbox.

How it looks on desktop

How it looks on mobile

    <style>

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

.btn-allow{
  border-radius: 80px;
  background-image: linear-gradient(135deg, #5F25A1, #4440BC);
  color: white;
  transition: 0.5s ease;
  font-size: 18px;
  line-height: 1em;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.1em;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  border: 1px solid #4440BC;
  height: 60px;
  width: 100%;
  padding: 20px 30px;
  margin-right: 50px
}
btn-login:focus{
  color: #3498db;
  box-shadow: inset 2px 2px 5px #BABECC,
             inset -5px -5px 10px #ffffff73;
}
.btn-deny{
  border-radius: 80px;
  background-image: rgb(217, 217, 217);
  color: rgb(26, 26, 26);
  transition: 0.5s ease;
  font-size: 18px;
  line-height: 1em;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.1em;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  border: none;
  height: 60px;
  width: 100%;
  padding: 20px 30px;
  margin-left: 50px
}
.btn-deny:focus{
  color: #3498db;
  box-shadow: inset 2px 2px 5px #BABECC,
             inset -5px -5px 10px #ffffff73;
}
.btn-allow:hover{
  color: #3498db;
  box-shadow: inset 2px 2px 5px #0a0a0a27,
 
}
.fa-question-circle::before {
  cursor: pointer;
}
    .d-flex {
      display: flex;
      flex-wrap: wrap;
      padding: 1rem;
      flex-direction: column;
      width: 100%;/*can edit as per requirement*/
    }

    .d-flex .col .child {
      display: flex;
      flex-wrap: wrap;
    }

    .d-flex .col {
      display: flex;
      flex-wrap: wrap;
      padding: 1rem 0;
      justify-content: space-between;
    }

    .d-flex p {
      padding: 0 1rem;
    }
    </style>
    <!--ADD THIS LINE TO GET FONTAWESOME ICONS IN HEAD TAG-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <div class="d-flex">
      <div class="col">
        <div class="child">
          <span class="fas fa-user"></span>
          <p>View, manage and publish your personal data</p>
        </div>
        <span class="fas fa-info"></span>
      </div>
      <div class="col">
        <div class="child">
          <span class="fas fa-user"></span>
          <p>View, manage and store your Contacts</p>
        </div>
        <span class="fas fa-info"></span>
      </div>
      <div class="col">
        <div class="child">
          <span class="fas fa-user"></span>
          <p>View your technicaldata*</p>
        </div>
        <span class="fas fa-info"></span>
      </div>
      <div class="d-flex">
     <div class="col">
      <div class="child">
<button class="btn-deny" type="submit" name="deny" >Deny</button>
</div>
<div class="childallow">
<button class="btn-allow" type="submit" name="allow" >Allow</button>
  </div>
</div>
    </div>

Answer 1

You should use CSS Media Queries to make that mobile responsive or the way you think it should look on mobile screen devices.

Typical media query looks like:

@media screen and (max-width:650px;){
.col{
    width:100%;
    }
}

By this way you can set styles of various elements regarding various screen size.

The screen resolutions of different devices are listed below:

• Mobile (Smartphone) max-width: 480px.
• Low Resolution Tablets and Ipads max-width: 767px.
• Tablets Ipads portrait mode max-width: 1024px.
• Desktops max-width: 1280px.
• Huge size (Larger screen) max-width: 1281px and greater.