Issue
I have several cards in my td table. Its width is broken below 400px. I cant find the solutions. Everything is fine in other large devices. However, below 400px, the cards break their width. Here is the screen shot 
My code -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cards Table</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row gx-0">
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Adidas Gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">AirBnb Gift Card</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Amazon Gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">American Express gift card</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Apple gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Athleta</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Adidas</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Bed bath and beyond Gift card</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Best buy gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Banana Republic</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Booking.com gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Costco cash card</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Cvs gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Dell gift card</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Disney gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Door dash gift card</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Ebay Gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Footlocker sports gift card</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
CSS -
`
.col-md-6{padding: 0;}.card-rate-link{text-decoration: none;}.card-title-font{background: linear-gradient(45deg, #fff, #fff, rgb(32, 109, 255)) !important;-webkit-background-clip: text !important;color: transparent !important;font-size: 1.8rem !important;text-align: center !important;}.table-data{width: 190px;max-width: 100%;}.container{max-width: 820px;}
.card {width: 100%;max-width: 190px;height: 214px;background: #07182E;position: relative;display: flex;place-content: center;place-items: center;overflow: hidden;border-radius: 20px;
margin: 0 auto !important;}
.card h2 {z-index: 1;color: white;font-size: 2em;}
.card::before {content: '';position: absolute;width: 100px;background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255,0,0));height: 130%;animation: rotBGimg 3s linear infinite;transition: all 0.2s linear;}
@keyframes rotBGimg {from {transform: rotate(0deg);}
to {transform: rotate(360deg);}}
.card::after {content: '';position: absolute;background: #000;;inset: 5px;border-radius: 15px;}
@media screen and (max-width:450px) {.card{height: 195px;padding: 5px;}.card-title-font{font-size: 1.6rem !important;}}@media screen and (max-width:350px) {.card-title-font{font-size: 1.5rem !important;}}`
I want all of my cards to be the same size, for all mobile device.
Solution
Add min-width:150px to .card.
It'll works.
Good luck.
Answered By - J.Porter
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.