How to adjust the responsive design to a cards - html

Question

I'm making a design of information cards for a website but when viewing it on a mobile device, some cards look bigger than others. How could I solve it?
At the beginning of the code, there is the CSS, then the html code
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row h1 {
width: 100%;
text-align: center;
font-size: 3.75em;
margin: 0.6em 0;
font-weight: 600;
color: #c49d12;
}
.column {
padding: 1em;
}
.card {
padding: 3.1em 1.25em;
text-align: center;
background: linear-gradient(0deg, #c49d12 10px, transparent 10px);
background-repeat: no-repeat;
background-position: 0 0.62em;
box-shadow: 0 0 2.5em rgba(139, 118, 32, 0.15);
border-radius: 0.5em;
transition: 0.5s;
cursor: pointer;
}
.card .icon {
font-size: 2.5em;
height: 2em;
width: 2em;
margin: auto;
background-color: #c49d12;
display: grid;
place-items: center;
border-radius: 50%;
color: #ffffff;
}
.icon:before {
position: absolute;
content: "";
height: 1.5em;
width: 1.5em;
border: 0.12em solid #5d4b0b;
border-radius: 50%;
transition: 0.5s;
}
.card h3 {
font-size: 1.3em;
margin: 1em 0 1.4em 0;
font-weight: 600;
letter-spacing: 0.3px;
color: #cda928;
}
.card p {
line-height: 2em;
color: #625a71;
}
.card:hover {
background-position: 0;
}
.card:hover .icon:before {
height: 2.25em;
width: 2.25em;
}
#media screen and (min-width: 768px) {
section {
padding: 1em 7em;
}
}
#media screen and (min-width: 992px) {
section {
padding: 1em;
}
.card {
padding: 5em 2em;
}
.column {
flex: 0 0 50%;
max-width: 50%;
padding: 0 1em;
}
}
</style>
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap" rel="stylesheet">
<section>
<div class="row">
<h1>Características</h1>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-user-friends"></i>
</div>
<h3>Capacidad</h3>
<p>
De 500 hasta 1,000 personas.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-couch"></i>
</div>
<h3>Mobiliario</h3>
<p>
Mobiliario incluido.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-glass-cheers"></i>
</div>
<h3>Bebidas</h3>
<p>
Refrescos y café
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-money-bill-wave-alt"></i>
</div>
<h3>Apartado</h3>
<p>
Apartado con $15,000.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-utensils"></i>
</div>
<h3>Mantelería</h3>
<p>
Mantelería, cubertería y vajilla.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-wine-bottle"></i>
</div>
<h3>Alcohol</h3>
<p>
Descorche libre.
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-money-bill"></i>
</div>
<h3>Liquidación</h3>
<p>
Liquidar 20 días antes del evento
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-lightbulb"></i>
</div>
<h3>Iluminación</h3>
<p>
Videos musicales,iluminación y robótica.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-user-check"></i>
</div>
<h3>Personal</h3>
<p>
Mesero, personal y maestro de ceremonias.
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-comments-dollar"></i>
</div>
<h3>Mensualidades.</h3>
<p>
Manejamos los mejores precios a mensualidades.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fab fa-black-tie"></i>
</div>
<h3>Entretenimiento</h3>
<p>
DJ y batucada.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-fan"></i>
</div>
<h3>Florería</h3>
<p>
Centro de flores
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-user-clock"></i>
</div>
<h3>Servicio.</h3>
<p>
Servicio hasta por 5hrs.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-cloud-meatball"></i>
</div>
<h3>Menú</h3>
<p>
Menú a 3 tiempos
</p>
</div>
</div>
</div>
</section>
I tried to edit certain values of the media query but I don't see any significant change.

Answer 1

Card 'Entretenimiento' has the widest title (h3) making its card the widest in the bunch. Actually its .columns container is stretched wider than the other ones. As does card 'Mensualidades.'.
I added the following code to your CSS:
.column {
flex: 1; /* allow to fill parent width */
min-width: min(15.25rem, 100%); /* at least 15.25rem, 100% when less space available*/
}
.card { height: 100% } /* Stretch to fill parent height */
Changed h3 temporary to width: max-content to find widest h3 with DevTools.
Minimum card width = 15.25rem = (~172px of widest h3) plus (2 x 1.25em card padding) plus (2 x 1rem column padding) = (172px + 40px + 32px) / 16 = 15.25rem.
You don't change the h3 { font-size: 1.3em } anywhere for either mobile/desktop, which means that the above 15.25rem is the minimum required space for a card to keep all cards equally sized on all devices.
Depending on the number of cards in a single row you want on a device, you will have to fiddle with the h3 font size per device type and modify the above 15.25rem to your requirements.
snippet
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row h1 {
width: 100%; width: 100%;
text-align: center;
font-size: 3.75em;
margin: 0.6em 0;
font-weight: 600;
color: #c49d12;
}
/* ADDED */
.column {
flex: 1; /* allow to fill parent width */
min-width: min(15.25rem, 100%); /* at least 17rem, 100% when less space available*/
}
.card { height: 100% } /* Stretch to fill parent height */
/**/
.column {
padding: 1em;
}
.card {
padding: 3.1em 1.25em;
text-align: center;
background: linear-gradient(0deg, #c49d12 10px, transparent 10px);
background-repeat: no-repeat;
background-position: 0 0.62em;
box-shadow: 0 0 2.5em rgba(139, 118, 32, 0.15);
border-radius: 0.5em;
transition: 0.5s;
cursor: pointer;
}
.card .icon {
font-size: 2.5em;
height: 2em;
width: 2em;
margin: auto;
background-color: #c49d12;
display: grid;
place-items: center;
border-radius: 50%;
color: #ffffff;
}
.icon:before {
position: absolute;
content: "";
height: 1.5em;
width: 1.5em;
border: 0.12em solid #5d4b0b;
border-radius: 50%;
transition: 0.5s;
}
.card h3 {
font-size: 1.3em;
margin: 1em 0 1.4em 0;
font-weight: 600;
letter-spacing: 0.3px;
color: #cda928;
}
.card p {
line-height: 2em;
color: #625a71;
}
.card:hover {
background-position: 0;
}
.card:hover .icon:before {
height: 2.25em;
width: 2.25em;
}
#media screen and (min-width: 768px) {
section {
padding: 1em 7em;
}
}
#media screen and (min-width: 992px) {
section {
padding: 1em;
}
.card {
padding: 5em 2em;
}
.column {
flex: 1 1 50%;
max-width: 50%;
padding: 0 1em;
}
}
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap" rel="stylesheet">
<section>
<div class="row">
<h1>Características</h1>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-user-friends"></i>
</div>
<h3>Capacidad</h3>
<p>
De 500 hasta 1,000 personas.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-couch"></i>
</div>
<h3>Mobiliario</h3>
<p>
Mobiliario incluido.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-glass-cheers"></i>
</div>
<h3>Bebidas</h3>
<p>
Refrescos y café
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-money-bill-wave-alt"></i>
</div>
<h3>Apartado</h3>
<p>
Apartado con $15,000.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-utensils"></i>
</div>
<h3>Mantelería</h3>
<p>
Mantelería, cubertería y vajilla.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-wine-bottle"></i>
</div>
<h3>Alcohol</h3>
<p>
Descorche libre.
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-money-bill"></i>
</div>
<h3>Liquidación</h3>
<p>
Liquidar 20 días antes del evento
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-lightbulb"></i>
</div>
<h3>Iluminación</h3>
<p>
Videos musicales,iluminación y robótica.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-user-check"></i>
</div>
<h3>Personal</h3>
<p>
Mesero, personal y maestro de ceremonias.
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-comments-dollar"></i>
</div>
<h3>Mensualidades.</h3>
<p>
Manejamos los mejores precios a mensualidades.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fab fa-black-tie"></i>
</div>
<h3>Entretenimiento</h3>
<p>
DJ y batucada.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-fan"></i>
</div>
<h3>Florería</h3>
<p>
Centro de flores
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-user-clock"></i>
</div>
<h3>Servicio.</h3>
<p>
Servicio hasta por 5hrs.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-cloud-meatball"></i>
</div>
<h3>Menú</h3>
<p>
Menú a 3 tiempos
</p>
</div>
</div>
</div>
</section>

Answer 2

In such scenarios, you have have also define a min-height, max-height or min-width, max-width depending upon the dimension that you're trying to control. Because the content is dynamic & the same goes for any images you might have in the content. Try it via using above styles, you'll get what you need.