What's the best way to make this flexbox design responsive for mobile devices? I want the layout to look consistent across both desktop and mobile screens. The issue seems to be related to the responsiveness of the flexbox and the smaller size of mobile screens. How can I address this problem effectively? Could adjusting the width of the flexbox help?
View desktop version
View mobile version
<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>