Currently, I am in the process of designing a profile page for a website that is under development. The challenge I'm facing is ensuring that when the page is viewed on a larger screen (anything above a tablet size), two cards are displayed side by side. However, due to the buttons within the cards shifting out of place when the page is resized, I have set a minimum width.
To maintain consistency and fill up space, there are empty columns on either side of the page.
For large desktop screens, everything aligns perfectly with the padding and two adjacent cards. But as the screen size shrinks below 1175px, the cards start overlapping each other. Instead of this behavior, I want the right card to move below the left one, which contains the profile information.
I have already configured it not to display on mobile devices, but I also need it to show with both columns stacked one on top of the other for mobile viewing as well.
Below is the HTML CODE:
<div class="container-fluid pcontainer">
<div class="row">
<div class="col-2 d-none d-lg-block">
test
</div>
<div class="col-4 d-none d-md-block">
<div class="card pc mw-100">
<div class="card-title">
<img class="pp card-img-top img-fluid rounded-circle" src="img/pp.jpg" alt="Card image cap">
<h4 class="pt card-title text-left text-justify"> Ryan Edwards </h4>
<button type="button" class="btn btn-sm btnp btn-outline-info">Add Friend</button>
<button type="button" class="btn btn-sm btn-outline-success">Message</button>
</div>
<div class="card-body">
<h3> My Biography: </h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-4 d-none d-md-block">
<div class="card pc mw-100">
<div class="card-title">
<img class="pp card-img-top img-fluid rounded-circle" src="img/pp.jpg" alt="Card image cap">
<h4 class="pt card-title text-left text-justify"> Ryan Edwards </h4>
<button type="button" class="btn btn-sm btnp btn-outline-info">Add Friend</button>
<button type="button" class="btn btn-sm btn-outline-success">Message</button>
</div>
<div class="card-body">
<h3> My Biography: </h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-2 d-none d-lg-block">
test
</div>
</div>
Here is the corresponding CSS:
.pc {
margin: 0px;
min-width:390px;
width: auto !important;
width:390px;
}
.pp {
max-width: 125px;
width: 125px;
max-height: 125px;
height: 125px;
margin-top: 40px;
margin-right: 40px;
float: right;
}
.pt {
margin-top: 50px;
margin-left: 50px;
}
.btnp {
margin-left: 50px;
}
.btn {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 8px;
padding-right: 8px;
}