htmlcsshtml-tableresponsive-design
why my html table td cards width are breaking below 400px? (For mobile devices)
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/[email protected]/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/[email protected]/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.
- My custom CSS transition animation is not working on hover after I added AOS JS library
- How to set data attributes in HTML elements
- How to get "Results per Row" (from a 'clicked entry' off a "dropdown menu") to show up correctly?
- How to reduce the size of an ASCII text art picture
- How to trigger SVG render same as manual DOM edit in Chrome using JS?
- Set element width based on a string that is not in the element
- Where are the trailing commas coming from in these radio buttons?
- 100vh height when address bar is shown - Chrome Mobile
- Capture selected option returns not defined instead
- Adjust navbar minimum height depending on screen width
- How to remove extra width from my website?
- Why doesn't backgroundColor=rgb(a,b,c) work?
- How to put json variable directly into DIV Class
- On hover the div inside button reduces height to give animation and little dark bottom. But text also moving up how to fix not move text
- WOW jquery slider
- Reduce the frequency of geolocation watchPosition calls
- Why should HTML elements (input, textarea, and select) have associated labels?
- Why ngModel doesn't works on the last version of Angular 17?
- How to make an element's background-color a little darker using CSS
- How do I clear the content of a div using JavaScript?
- How do I display images from Google Drive on a website?
- Tailwind h-screen doesn’t work properly on mobile devices
- Edit icon in mobile view missing
- Sticky header input scrolls on input
- Image not loading on local site I made
- React error in index.js, "Uncaught ReferenceError: dom is not defined"
- Make the mix-blend-mode on a sticky navbar ignore certain elements while scrolling down
- How to prevent bleach from escaping > (blockquote) tag used in Markdown
- Why is the input bar spilling slightly on the right side of the container?
- Method to show native datepicker in Chrome