How can I stick something to the screen with responsive CSS? - html

Question

I am trying to make a fintech application and I am using a mockup from an already existing application as my own UI. I need it to look as professional as possible. I have a bit of a problem though. My application has a card in one of the sections. On PC, it looks fine but it moves out from its original position on mobile. I have added media queries but they are not helping.
It's my codes:
.card-container {
position: relative;
}
.card-tip {
width: 290px;
height: 16px;
background-color: rgba(223, 186, 129, 0.6);
margin: 30px auto 0 auto;
border-radius: 40px;
}
.card-tip span {
width: 250px;
height: 3px;
display: block;
background-color: #8F6524;
margin: auto;
transform: translateY(6px);
}
.card {
width: 260px;
height: 350px;
background-color: white;
margin-left: 40.5%;
box-shadow: 3px 3px rgba(32, 30, 30, 0.3);
transform: translateY(-9px);
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
<section id="feature-section">
<h1>It's free to send money</h1>
<p>It costs nothing to send money, when you link your Paga wallet to your bank account.</p>
<div class="card-container">
<div class="card-tip">
<span></span>
</div>
<div class="card">
<h6>Your receipt</h6>
<i class="fas fa-chevron-circle-up"></i>
<p>₦<span>0</span>.00</p>
<h6>No transfer fee</h6>
<h6>No 'convenience' fee</h6>
<h6>No hidden charge</h6>
<img src="images/rocket.png" alt="">
</div>
</div>
</section>
The completed web page can also be locked viewed through this link: https://chinomso1995.github.io/mini-fintech-application.
Just click on send money. Its the first link Item.
The card shifts on mobile.

Answer 1

it's not right to use margin-left to center items. You can use margin: auto to center items exactly.If you use margin-left to average items with each other, you will have to adjust them all again for each size ( tablet, mobile). a method is not correct.
I also used the display:flex structure to bring the card down and down without overflow.
No matter what size they are, there will be no overflow because I use Display flex.
.card-container {
position: relative;
display: flex;
flex-direction: column;
margin: auto;
}
.card-tip {
width: 290px;
height: 16px;
background-color: rgba(223, 186, 129, 0.6);
margin: 30px auto 0 auto;
border-radius: 40px;
}
.card-tip span {
width: 250px;
height: 5px;
display: block;
background-color: #8F6524;
margin: auto;
transform: translateY(6px);
}
.card {
width: 260px;
height: 350px;
background-color: #000234;
box-shadow: 1px 1px 1px rgba(32, 30, 30, 0.3);
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
margin: auto;
color: #fff;
display:flex;
flex-direction:column;
align-items:center;
<section id="feature-section">
<h1>It's free to send money</h1>
<p>It costs nothing to send money, when you link your Paga wallet to your bank account.</p>
<div class="card-container">
<div class="card-tip">
<span></span>
</div>
<div class="card">
<h6>Your receipt</h6>
<i class="fas fa-chevron-circle-up"></i>
<p>₦<span>0</span>.00</p>
<h6>No transfer fee</h6>
<h6>No 'convenience' fee</h6>
<h6>No hidden charge</h6>
<img src="images/rocket.png" alt="">
</div>
</div>
</section>