Everything runs smoothly when accessing the website and using the form on localhost. However, once it's uploaded to a server, the form only functions correctly on desktop devices. On mobile, the form fails to filter and displays all professionals instead. The website is constructed with bootstrap and javascript.
<script type="text/javascript">
window.onload=function(){
var element1 = document.getElementById("link-index");
element1.classList.remove("active");
var element = document.getElementById("link-profesionales");
element.classList.add("active");
}
</script>
<div class=" p-2" style="background-color: #f2f3f4;">
<nav class="" aria-label="breadcrumb">
<div class=" col-sm-1 col-md-12 col-lg-12">
<ol class="breadcrumb">
<li class="ms-lg-5 ms-4 breadcrumb-item"><a class="breadcrumb-css" href="index.php">Inicio</a></li>
<li class="breadcrumb-item active" aria-current="page">Profesionales</li>
</ol>
</div><h1 class="ms-lg-5 ms-4">Profesionales</h1>
</nav>
</div>
<style type="text/css">
/* Create three equal columns that floats next to each other */
.column {
display: none; /* Hide columns by default */
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
/* Content */
.content {
background-color: white;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
.card-footer{
position:absolute;
bottom:0;
width:100%;
background-color: white;
}
.form-select:focus {
border-color: #FFBE2C;
outline: 0;
box-shadow: 0 0 0 0.25rem #FFBE2C;
}
/*
select option {
background-color: #FFBE2C;
font-weight: bold;
color: white;
}
select option:checked{
box-shadow: 0 0 10px 100px #1882A8;
background-color: #FFBE2C;
font-weight: bold;
color: white;
}
*/
</style>
<div class="container">
<div class="row">
<div class="mt-5 col-12 text-center">
<div class="btn-group col-auto" role="group" aria-label="Basic example">
<form class="" method="GET" action="profesionales.php" id="formprofeesionales" >
<label style="font-weight: bold;" for="exampleFormControlInput1" class="form-label col-md-8">Consultar por Especialidad:</label>
<select id="select1" onchange="filterSelection('all')" class="form-select" aria-label="Default select example">
<option selected value="all">Todos</option>
<option onclick="filterSelection('Fisioterapia')" value="Fisioterapia">Fisioterapia</option>
<option onclick="filterSelection('Fonoaudiología')" value="Fonoaudiología">Fonoaudiología</option>
<option onclick="filterSelection('Psicología')" value="Psicología">Psicología</option>
</select>
</form>
</div>
</div>
</div>
<!-- Portfolio Gallery Grid -->
<div class="row row-cols-2 g-2 row-cols-md-6 mt-1">
<div class="border-0 me-lg-4 my-lg-4 col card column Fonoaudiología">
<div class="content">
<div class="h-100 card ">
<img src="https://www.bizkaiatalent.eus/wp-content/uploads/2014/05/ETB_Estibaliz-Ruiz-de-Azua1.jpg" class="img-thumbnail card-img-top border-0" alt="mountains">
<div class="card-body">
<h5 class="card-title">María Silvina Luchino</h5>
<p class="card-text">Fonoaudiologa</p>
<p class="mb-5 card-text">MP 34567</p>
</div>
<div class="card-footer"><a href="#" class="especialidades btn btn-sm">Contactar</a></div>
</div>
</div>
</div>
...
<!-- END GRID -->
</div>
</div>
<?php include 'footer.html'; ?>
The form is visible on mobile but does not filter or function properly. What could be causing this issue? Thank you for your help!