Responsive design isn't working on cards [HTML & CSS] - html

Question

I'm having a problem with my website.
When I open https://www.b3lieve.com.mx/precios.html the card-prices section works correctly (if it's in computer).
But if I visualize the same section but in a mobile or using the responsive design tool, it doesn’t work or have design. What should I do?
visualized from responsive design tool
visualized from computer
I tried it from localhost and it works correctly either computer or responsive design. Could be a problem with my hosting service?
Here's the code...
`
<div class="packs" style="padding-top:80px;">
<h2 style="text-align:center;">Booth 360°</h2>
<div class="pricing-table" id="360">
<div class="pricing-card">
<h3 class="pricing-card-header">Básico</h3>
<div class="price"><sup>$</sup>5,300 MXN</div>
<ul>
<li><strong>1</strong> Booth 360°.</li>
<li><strong>2</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Videos y fotos<strong> ilimitados</strong> durante todo el servicio.</li>
<li><strong>2</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
Seleccionar
</div>
</div>
<div class="pricing-table">
<div class="pricing-card">
<h3 class="pricing-card-header">Clásico</h3>
<div class="price"><sup>$</sup>6,800 MXN</div>
<ul>
<li><strong>1</strong> Booth 360°.</li>
<li><strong>3</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Videos y fotos<strong> ilimitados</strong> durante todo el servicio.</li>
<li><strong>4</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
Seleccionar
</div>
</div>
<div class="pricing-table">
<div class="pricing-card">
<h3 class="pricing-card-header">Prémium</h3>
<div class="price"><sup>$</sup>8,300 MXN</div>
<ul>
<li><strong>1</strong> Booth 360°.</li>
<li><strong>5</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Videos y fotos<strong> ilimitados</strong> durante todo el servicio.</li>
<li><strong>6</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
Seleccionar
</div>
</div>
<div class="pricing-table">
<div class="pricing-card">
<h3 class="pricing-card-header">Personalizado</h3>
<div class="price">Contáctanos</div>
<ul>
<li><strong>1</strong> Booth 360°.</li>
<li><strong>?</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Videos y fotos<strong> ilimitados</strong> durante todo el servicio.</li>
<li><strong>?</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
Seleccionar
</div>
</div> <!-- CABINA 360 -->
<br>
<br>
<br>
<h2 style="text-align:center;">Magic Mirror Booth</h2>
<div class="pricing-table">
<div class="pricing-card" id="mirror">
<h3 class="pricing-card-header">Básico</h3>
<div class="price"><sup>$</sup>5,900 MXN</div>
<ul>
<li><strong>1</strong> Booth Magic Mirror.</li>
<li><strong>2</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Fotos<strong> ilimitadas</strong> durante todo el servicio.</li>
<li><strong>2</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
Seleccionar
</div>
</div>
<div class="pricing-table">
<div class="pricing-card">
<h3 class="pricing-card-header">Clásico</h3>
<div class="price"><sup>$</sup>7,400 MXN</div>
<ul>
<li><strong>1</strong> Booth Magic Mirror.</li>
<li><strong>3</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Fotos<strong> ilimitadas</strong> durante todo el servicio.</li>
<li><strong>4</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
Seleccionar
</div>
</div>
<div class="pricing-table">
<div class="pricing-card">
<h3 class="pricing-card-header">Prémium</h3>
<div class="price"><sup>$</sup>9,900 MXN</div>
<ul>
<li><strong>1</strong> Booth Magic Mirror.</li>
<li><strong>5</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Fotos<strong> ilimitadas</strong> durante todo el servicio.</li>
<li><strong>6</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
Seleccionar
</div>
</div>
<div class="pricing-table">
<div class="pricing-card">
<h3 class="pricing-card-header">Personalizado</h3>
<div class="price">Contáctanos</div>
<ul>
<li><strong>1</strong> Booth Magic Mirror.</li>
<li><strong>?</strong> horas de servicio.</li>
<li><strong>2</strong> personas de Staff.</li>
<li>Fotos<strong> ilimitados</strong> durante todo el servicio.</li>
<li><strong>?</strong> templates diferentes y props.</li>
<li>Transportación dentro de la <strong>Ciudad de México</strong>.</li>
</ul>
Seleccionar
</div>
</div>
</div>
`
`
.pricing-table{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: min(1600px, 100%);
}
.pricing-card{
flex: 1;
max-width: 360px;
background-color: #17173d;
margin: 20px 10px;
text-align: center;
cursor: pointer;
overflow: hidden;
color: #f9f9f9;
transition: .3s linear;
border-radius: 20px;
}
.pricing-card-header{
background-color: var(--majorelle-blue);
display: inline-block;
color: #fff;
padding: 12px 30px;
border-radius: 0 0 20px 20px;
font-size: 16px;
text-transform: uppercase;
font-weight: 600;
transition: .4s linear;
}
.pricing-card:hover .pricing-card-header{
box-shadow: 0 0 0 26em var(--majorelle-blue);
}
.price{
font-size: 35px;
color: var(--majorelle-blue);
margin: 40px 0;
transition: .2s linear;
}
.price sup{
font-size: 22px;
font-weight: 700;
}
.pricing-card:hover ,.pricing-card:hover .price{
color: #fff;
}
.pricing-card li{
font-size: 16px;
padding: 10px 0;
text-transform: uppercase;
}
.order-btn{
display: inline-block;
margin-bottom: 40px;
margin-top: 80px;
border: 2px solid var(--majorelle-blue);
color: var(--majorelle-blue);
padding: 18px 40px;
border-radius: 8px;
text-transform: uppercase;
font-weight: 500;
transition: .3s linear;
}
.order-btn:hover{
background-color: var(--majorelle-blue);
color: #fff;
}
#media screen and (max-width:1100px) {
.pricing-card{
flex: 50%;
}
}
`

Answer 1

you just didn't close the first and the second #media query. that's it.
#media (min-width: 450px) {
/**
* HERO
*/
.hero-form { position: relative; }
.email-field {
margin-bottom: 0;
padding-right: 155px;
}
.hero .btn-primary {
position: absolute;
top: 5px;
right: 5px;
padding-block: 12.5px;
}
.hero-ctc .btn-primary {
position: absolute;
top: 5px;
right: 5px;
padding-block: 12.5px;
}
} /* this wasn't closed */
#media (min-width: 450px) {
/**
* HERO
*/
.hero-form { position: relative; }
.email-field {
margin-bottom: 0;
padding-right: 155px;
}
.hero .btn-primary {
position: absolute;
top: 5px;
right: 5px;
padding-block: 12.5px;
}
.hero-ctc .btn-primary {
position: absolute;
top: 5px;
right: 5px;
padding-block: 12.5px;
}
} /* this wasn't closed */

Answer 2

Take a look in your css.
You have...
#media (min-width: 450px) {
/**
* HERO
*/
.hero-form { position: relative; }
.email-field {
margin-bottom: 0;
padding-right: 155px;
}
.hero-ctc .btn-primary {
position: absolute;
top: 5px;
right: 5px;
padding-block: 12.5px;
}
/**
* ABOUT
*/
.about-card .card-text {
max-width: 300px;
margin-inline: auto;
}
}
... as your smallest minimum width where styles are applied for mobile devices. (by the way, you have that exact same #media definition for the minimum width of 450 pixels case in there three times for some reason... perhaps a bad copy and paste?)
Then, if you look at the dimensions in the responsive viewport as shown in the provided screenshot, you can see the width is 414. If you were to drag that viewport screen to the right or set the width to 450 or greater, the style will show.
If you find it necessary, you can define smaller minimum width dimension cases in your css, being mindful that your definitions start with the smallest and work up to the largest.

Answer 3

You have a couple of copy and paste CSS media queries from line 791 to 871.
The majority of css classes ans attributes are the same.
But I think the problem is in you style.css line 819 you open a #media (min-width: 450px) but you don't close in line 844.
You forgot to close braces here
That should work like a charm
Mobile view with close braces modification