Same width in divs with larger or shorter text inside - html

I have trouble with box size, the trouble is that sometimes the text inside of a box is grower than other boxes. How can I have a fixed width in my boxes? is there a Bootstrap class that can do dat?
https://jsfiddle.net/tyxc4edf/
<div class="container">
<div class="row justify-content-center">
<div class="col-xs-12 col-md-12 col-lg-12 col-xl-12">
<div class="progress my-4">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="12" aria-valuemin="0" aria-valuemax="17" style="width: 70.588235294118%">
</div>
</div>
<div class="col-md-12 ">
<div class="card box-option-container justify-content-center ">
<h2 tabindex="0" role="heading" class="text-center">
<div class="question-title">
¿Estas abierto/a a viajar?
</div>
</h2>
<div class="row text-center no-gutters d-flex justify-content-center ">
<div class="option">
<label for="Otro: No puedes dejar tu tierra por razones personales mas estás dispuesto a tener una relación con alguien que sí pueda dejar su hogar e ir contigo">
<div class="box-option py-5 align-middle ">
<input id="Otro: No puedes dejar tu tierra por razones personales mas estás dispuesto a tener una relación con alguien que sí pueda dejar su hogar e ir contigo" type="radio" name="SEARCHED_GENDER" class="radio" value="hombre">
<span class="p-5 option-text">Otro: No puedes dejar tu tierra por razones personales mas estás dispuesto a tener una relación con alguien que sí pueda dejar su hogar e ir contigo</span>
</div>
</label>
<label for="No interesado: Por nada del mundo dejarías a tu tierra y a los seres queridos con los creciste, por lo que necesitas a alguien que sea de tu misma comunidad">
<div class="box-option py-5 align-middle ">
<input id="No interesado: Por nada del mundo dejarías a tu tierra y a los seres queridos con los creciste, por lo que necesitas a alguien que sea de tu misma comunidad" type="radio" name="SEARCHED_GENDER" class="radio" value="hombre">
<span class="p-5 option-text">No interesado: Por nada del mundo dejarías a tu tierra y a los seres queridos con los creciste, por lo que necesitas a alguien que sea de tu misma comunidad</span>
</div>
</label>
<label for="Interesado: Estás dispuesto a abandonar tu tierra natal y vivir mucho tiempo en el extranjero">
<div class="box-option py-5 align-middle ">
<input id="Interesado: Estás dispuesto a abandonar tu tierra natal y vivir mucho tiempo en el extranjero" type="radio" name="SEARCHED_GENDER" class="radio" value="hombre">
<span class="p-5 option-text">Interesado: Estás dispuesto a abandonar tu tierra natal y vivir mucho tiempo en el extranjero</span>
</div>
</label>
</div>
</div>
</div>
<div class="nav-buttons right-button float-right m-2">
<a class="btn btn-primary next" href="http://ilink.test/test/next" style="display: none;">Pregunta Siguiente</a>
</div>
<div class="nav-buttons left-button float-left m-2">
<a class="btn btn-warning back" href="http://ilink.test/test/back">Pregunta Anterior</a>
</div>
</div>
</div>
</div>
</div>
EDIT: The width of the last box is smaller than the other boxes in larger screens. Try it growning the size of HTML section in jsfiddle

Add on your labels bootstrap class="col-12" like:
<label class="col-12" for="Interesado: Estás dispuesto a abandonar tu tierra natal y vivir mucho tiempo en el extranjero">
Add col-12 on all labels.Now each label will get width 100% and all labels will have the same size!
Live example

In you class .option-text you should add font-size: [Wanted size]. Therefor, every boxes/options will have the same font size.

Add d-flex flex-column classes with option class
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
// Fonts
//#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Bootstrap
//#import '~bootstrap/scss/bootstrap';
#import "~bootswatch/dist/materia/bootstrap.min.css";
#import '~toastr/toastr';
#import "~animate.css/animate.css";
// Font Awesome
//#import '~#fortawesome/fontawesome-free/scss/fontawesome';
//#import '~#fortawesome/fontawesome-free/scss/regular';
//#import '~#fortawesome/fontawesome-free/scss/solid';
//#import '~#fortawesome/fontawesome-free/scss/brands';
/** Ajustes generales **/
body {
background-color: #F9F9F9;
}
.nav-login {
box-shadow: none;
color: $white!important;
text-transform: capitalize;
padding-top: 0.3rem;
padding-right: 1rem;
padding-bottom: 0.3rem;
padding-left: 1rem;
}
.nav-login:hover {
background-color: #b61825;
}
.nav-login a {}
a {
color: $white;
}
a:hover {
color: $black;
text-decoration: none;
}
.btn-mred {
background-color: $mred;
}
.btn-mred:hover {
background-color: $btn-mred-hover;
}
.bg-color {
background-color: $bg-color;
}
/** Imagen Background **/
body,
html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("../imgs/imgparejas/couple-1030744.jpg")!important;
/* Full height */
height: 100%!important;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg2 {
/* The image used */
background-image: url("../imgs/imgparejas/couple-1363967.jpg")!important;
/* Full height */
height: 100%!important;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg3 {
background-image: url("../imgs/imgparejas/couple-1329349.jpg")!important;
/* Full height */
height: 100%!important;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg4 {
background-image: url("../imgs/imgparejas/freestocks-org-t3mXTwuTWJ4-unsplash.jpg")!important;
/* Full height */
height: 100%!important;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.mred {
background-color: $mred;
}
.slogan {
font-size: 15px;
}
.logo {
font-size: 25px;
}
/** Card welcome ***/
.welcome-card {
background-color: $welcome-card;
}
/** cards **/
.card-material {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.card-material:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.info-card>* {
font-size: 25px;
}
.circle {
display: inline-block;
text-align: center;
width: 70px;
height: 70px;
-moz-border-radius: 50%!important;
-webkit-border-radius: 50%!important;
border-radius: 50%;
-webkit-box-shadow: -2px 3px 10px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -2px 3px 10px 0px rgba(0, 0, 0, 0.75);
box-shadow: -2px 3px 10px 0px rgba(0, 0, 0, 0.75);
}
.circle>.icons {
position: relative;
top: calc(50% - 10px);
/* 50% - 3/4 of icon height */
}
.fav-btn {
background-color: $white;
}
.msg-btn {
background-color: $white;
}
.lov-icon {
font-size: 25px;
}
.msg-icon {
font-size: 25px;
}
.lov-icon-color {
color: $red;
}
.msg-icon-color {
color: green;
}
.fav-btn-selected {
background-color: $btn-mred-hover;
}
.msg-btn-selected {
background-color: green;
}
.lov-icon-color-selected {
color: $white;
}
.msg-icon-color-selected {
color: $white;
}
.profile-name-card {
border: none;
}
.option {
margin-left: 10px;
margin-right: 10px;
}
.box-option {
border: 2px solid gray;
}
.box-option-container {
border: none;
}
.back-color {
background-color: $body-bg;
}
.question {
background-color: $white;
text-align: center;
position: relative;
min-height: 450px;
padding-bottom: 50px;
}
.card-material {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.50s cubic-bezier(.25, .8, .25, 1);
}
.card-material:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.question-title {
width: 90%;
margin: 0 auto 50px;
font-size: 25px;
font-weight: 400;
}
.option input {
position: absolute;
opacity: 0;
}
.input {
cursor: pointer;
}
.option>input+div {
/* DIV STYLES */
cursor: pointer;
border: 2px solid transparent;
}
.option-text {
cursor: pointer;
}
.box-option:hover {
background: $btn-mred;
color: $white;
border: 2px solid $btn-mred;
}
.box-option-checked {
background: $btn-mred;
color: $white;
border: 2px solid $btn-mred;
}
/* Elemento Radio, cuando está marcado */
input[type="radio"]:checked~.box-option {
background: $btn-mred;
color: $white;
border: 2px solid $btn-mred;
}
.fixed-box {
//display: block;
//width: auto;
}
.col-container {
display: table;
width: 100%;
}
.fixed-box {
display: table-cell;
padding: 16px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center">
<div class="col-xs-12 col-md-12 col-lg-12 col-xl-12">
<div class="progress my-4">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="12" aria-valuemin="0" aria-valuemax="17" style="width: 70.588235294118%">
</div>
</div>
<div class="col-md-12 ">
<div class="card box-option-container justify-content-center ">
<h2 tabindex="0" role="heading" class="text-center">
<div class="question-title">
¿Estas abierto/a a viajar?
</div>
</h2>
<div class="row text-center no-gutters d-flex justify-content-center ">
<div class="option d-flex flex-column">
<label for="Otro: No puedes dejar tu tierra por razones personales mas estás dispuesto a tener una relación con alguien que sí pueda dejar su hogar e ir contigo">
<div class="box-option py-5 align-middle ">
<input id="Otro: No puedes dejar tu tierra por razones personales mas estás dispuesto a tener una relación con alguien que sí pueda dejar su hogar e ir contigo" type="radio" name="SEARCHED_GENDER" class="radio" value="hombre">
<span class="p-5 option-text">Otro: No puedes dejar tu tierra por razones personales mas estás dispuesto a tener una relación con alguien que sí pueda dejar su hogar e ir contigo</span>
</div>
</label>
<label for="No interesado: Por nada del mundo dejarías a tu tierra y a los seres queridos con los creciste, por lo que necesitas a alguien que sea de tu misma comunidad">
<div class="box-option py-5 align-middle ">
<input id="No interesado: Por nada del mundo dejarías a tu tierra y a los seres queridos con los creciste, por lo que necesitas a alguien que sea de tu misma comunidad" type="radio" name="SEARCHED_GENDER" class="radio" value="hombre">
<span class="p-5 option-text">No interesado: Por nada del mundo dejarías a tu tierra y a los seres queridos con los creciste, por lo que necesitas a alguien que sea de tu misma comunidad</span>
</div>
</label>
<label for="Interesado: Estás dispuesto a abandonar tu tierra natal y vivir mucho tiempo en el extranjero">
<div class="box-option py-5 align-middle ">
<input id="Interesado: Estás dispuesto a abandonar tu tierra natal y vivir mucho tiempo en el extranjero" type="radio" name="SEARCHED_GENDER" class="radio" value="hombre">
<span class="p-5 option-text">Interesado: Estás dispuesto a abandonar tu tierra natal y vivir mucho tiempo en el extranjero</span>
</div>
</label>
</div>
</div>
</div>
<div class="nav-buttons right-button float-right m-2">
<a class="btn btn-primary next" href="http://ilink.test/test/next" style="display: none;">Pregunta Siguiente</a>
</div>
<div class="nav-buttons left-button float-left m-2">
<a class="btn btn-warning back" href="http://ilink.test/test/back">Pregunta Anterior</a>
</div>
</div>
</div>
</div>
</div>

Related

How to place an icon next to text and centering a header

I am trying to get an icon to be placed to the left of the text as in the image. Right now for some reason it is on top of the text. The icon are inside tabs with text and I want the icons to change for each tab. Even if I change the margins, they do not move.
Senconly, I have an image and text in the header and it looks fine in google chrome but when I change browsers they pile to the left. They are currently placed in the center by adjusting the margins but maybe a flex display or grid will make them look centered in every browser and be cleaner? could I do this?
Thanks
<header>
<div class="container_header">
<img ID="foto_perfil" src="iconos/perfil.png" alt="Foto de perfil">
<h1 class="Nombre">Daniela Sucunza</h1>
<p class="titulo">Licenciada en Administración</p>
<p class="titulo">Programadora Front End</p>
</div>
</main>
</header>
<body>
<script src="function.js"></script>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Acerca')">Acerca de mi</button>
<button class="tablinks" onclick="openCity(event, 'Experiencia')">Experiencia</button>
<button class="tablinks" onclick="openCity(event, 'Educacion')">Educación</button>
<button class="tablinks" onclick="openCity(event, 'Habilidades')">Habilidades</button>
</div>
<div id="demo">
<div id="Acerca" class="tabcontent" style=display:block>
<i class="fa-regular fa-user"></i>
<p><img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Profesional ambicioso y con formación en recursos humanos, que busca un puesto de principiante en el que pueda utilizar mejor mis habilidades y mi pasión.<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Ambicioso y capaz de trabajar independientemente o en equipo. Comprometido a establecer y mantener un ambiente de trabajo positivo para todos los empleados.<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Como esta área complementa mis estudios, estoy ansioso por adquirir más experiencia en este campo. Por esta razón, estoy buscando una compañía dispuesta a ofrecerme una ubicación entre sus desarrolladores. A cambio, ofrecería mi todo compromiso y sería una adición agradable y amigable para su equipo.<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Por lo tanto, actualmente estoy buscando un trabajo o una pasantía como un front-end desarrollador.</p></p>
</div>
<div id="Experiencia" class="tabcontent" style=display:none>
<p><h3>Asistente de Recursos Humanos</h3>
Noviembre, 2015- Octubre, 2020<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Creación de un registro de cumplimiento para uso de la gerencia cada mes.<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Asistencia en el mantenimiento de todos los archivos en papel para el departamento de RRHH.<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Apoyo en la creación de documentación para todos los nuevos empleados, y siguió creando archivos conforme al protocolo de RRHH.<br>
<h3>Asistente de Recepción<br></h3>
Julio 2013- Junio 2015<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Apoyo en la actualización de toda la información de beneficios, a la vez que ampliaba los conocimientos relacionados con los beneficios para los empleados.<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Conducta profesional, agradable y trabajadora en el día a día.</p>
</div>
<div id="Educacion" class="tabcontent" style=display:none>
<p> <h3>Licenciatura en Recusos Humanos</h3>
Febrero 2009 - Octubre, 2013<br>
Graduado magna cum laude. Escritor principal de la revista universitaria El León.<br>
<h3>Master en Ciencia Datos</h3>
Febrero 2015- Octubre, 2017<br>
Universidad Nacional
</p>
</div>
<div id="Habilidades" class="tabcontent" style=display:none>
<h3>Habilidades</h3>
<p><img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Ingles Avanzado<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Portugues Intermedio<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">SQL <br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Power BI <br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Photoshop<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Python</p>
</div>
</div>
</body>
<footer>
</footer>
</html>
:root{
--primario: #E8F3D6;
--Oscuro: #A0E4CB;
--blanco: #fff;
--Negro: #000;
--FuentePrincipal: 'Jost', sans-serif;
--FuenteTitulo: 'DM Serif Display', serif;
}
/*GENERALES*/
html {
box-sizing: border-box;
}
body{
background-color: white;
color: black;
margin: auto;
}
/* HEADER*/
#foto_perfil{
border-radius: 100px;
float: left;
width:170px;
height:170px;
margin-left: 470px;
margin-right: 70px;
margin-top: 15px;
opacity: 1.0;
}
#foto_perfil:hover {
opacity: 0.7;
}
.container_header {
top: 0%;
justify-content: center;
flex-direction: column;
align-items: center;
text-align: left;
width: 100%;
height: 200px;
background: var(--primario);
}
.Nombre{
font-family: var(--FuenteTitulo);
font-weight:200;
margin-right: 1rem;
color: black;
font-size: 35px;
padding-top: 25px;
}
.titulo{
font-family: var(--FuentePrincipal);
margin-right: 1rem;
font-size: 20px;
font-weight: bold;
font-style: italic;
}
#demo {
font-family: var(--FuentePrincipal);
line-height: 35px;
margin-top: 1rem;
font-size: large;
text-align: justify;
margin-left: 25rem;
margin-right: 10rem;
white-space: wrap;
}
/* button*/
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.tab button {
text-align: center;
background-color: inherit;
float: center;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
float: center;
text-decoration: none;
width: 22%;
margin-top: 1rem;
margin-left: 2rem;
filter: drop-shadow(0px 4px 4p
x rgba(0, 0, 0, 0.15));
border-radius: 8px;;
background-color: white;
color: black;
border: 2px solid var(--primario);
}
.tab button:hover {
background-color: var(--Oscuro);
color: black;
border: 2px solid var(--Oscuro)
}
.tab button.active {
background-color: #A0E4CB;
}
.tabcontent {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
#-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
/* ICONOS*/
img {
width: 15px;
height:15px;
}
/*TABS*/
h3{
font-weight: bolder;
font-style: italic;
}
/* FOOTER*/
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
background-color: var(--primario);
/** margin-top: 2rem;**/
}
.fa-brands {
color: var(--Negro);
padding: 20px;
font-size: 30px;
width: 30px;
height: 30px;
text-align: center;
text-decoration: none;
padding: 16px 32px;
margin: 15px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-regular{
padding: 20px;
font-size: 30px;
width: 30px;
height: 30px;
text-align: right;
text-decoration: none;
padding: 16px 32px;
margin-right: 0% ;
}
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
current page
model- expected outcome
modifying margins, adding display.grid, display-flex
Yes flex will do. I've added flex to the header and all of the tabs.
function openCity(event, city) {
const tabs = document.querySelectorAll(".tabcontent")
tabs.forEach(tab => tab.style['display'] = 'none')
document.getElementById(city).style['display'] = 'flex';
}
:root {
--primario: #E8F3D6;
--Oscuro: #A0E4CB;
--blanco: #fff;
--Negro: #000;
--FuentePrincipal: 'Jost', sans-serif;
--FuenteTitulo: 'DM Serif Display', serif;
}
/*GENERALES*/
html {
box-sizing: border-box;
}
body {
background-color: white;
color: black;
margin: auto;
}
/* HEADER*/
#foto_perfil {
border-radius: 100px;
width: 170px;
height: 170px;
margin-left: 470px;
margin-right: 70px;
margin-top: 15px;
opacity: 1.0;
}
#foto_perfil:hover {
opacity: 0.7;
}
.container_header {
display: flex;
justify-content: center;
align-items: center;
text-align: left;
width: 100%;
height: 200px;
background: var(--primario);
}
.Nombre {
font-family: var(--FuenteTitulo);
font-weight: 200;
margin-right: 1rem;
color: black;
font-size: 35px;
padding-top: 25px;
}
.titulo {
font-family: var(--FuentePrincipal);
margin-right: 1rem;
font-size: 20px;
font-weight: bold;
font-style: italic;
}
#demo {
font-family: var(--FuentePrincipal);
line-height: 35px;
margin-top: 1rem;
font-size: large;
text-align: justify;
margin-left: 25rem;
margin-right: 10rem;
white-space: wrap;
}
/* button*/
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.tab button {
text-align: center;
background-color: inherit;
float: center;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
text-decoration: none;
width: 22%;
margin-top: 1rem;
margin-left: 2rem;
filter: drop-shadow(0px 4px 4p x rgba(0, 0, 0, 0.15));
border-radius: 8px;
background-color: white;
color: black;
border: 2px solid var(--primario);
}
.tab button:hover {
background-color: var(--Oscuro);
color: black;
border: 2px solid var(--Oscuro)
}
.tab button.active {
background-color: #A0E4CB;
}
.tabcontent {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
#-webkit-keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ICONOS*/
img {
width: 15px;
height: 15px;
}
/*TABS*/
h3 {
font-weight: bolder;
font-style: italic;
}
#demo>* {
display: flex;
justify-content: center;
align-items: center;
}
/* FOOTER*/
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
background-color: var(--primario);
/** margin-top: 2rem;**/
}
.fa-brands {
color: var(--Negro);
padding: 20px;
font-size: 30px;
width: 30px;
height: 30px;
text-align: center;
text-decoration: none;
padding: 16px 32px;
margin: 15px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-regular {
padding: 20px;
font-size: 30px;
width: 30px;
height: 30px;
text-align: right;
text-decoration: none;
padding: 16px 32px;
margin-right: 0%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<header>
<div class="container_header">
<img ID="foto_perfil" src="iconos/perfil.png" alt="Foto de perfil">
<div class="info">
<h1 class="Nombre">Daniela Sucunza</h1>
<p class="titulo">Licenciada en Administración</p>
<p class="titulo">Programadora Front End</p>
</div>
</div>
</header>
<script src="function.js"></script>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Acerca')">Acerca de mi</button>
<button class="tablinks" onclick="openCity(event, 'Experiencia')">Experiencia</button>
<button class="tablinks" onclick="openCity(event, 'Educacion')">Educación</button>
<button class="tablinks" onclick="openCity(event, 'Habilidades')">Habilidades</button>
</div>
<div id="demo">
<div id="Acerca" class="tabcontent" style=display:flex>
<i class="fa-regular fa-user"></i>
<p>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Profesional ambicioso y con formación en recursos humanos, que busca un puesto de principiante en el que
pueda utilizar mejor mis habilidades y mi pasión.<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Ambicioso y capaz de trabajar independientemente o en equipo. Comprometido a establecer y mantener un ambiente
de trabajo positivo para todos los empleados.<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Como esta área complementa mis estudios, estoy ansioso por adquirir más experiencia en este campo. Por
esta razón, estoy buscando una compañía dispuesta a ofrecerme una ubicación entre sus desarrolladores. A cambio, ofrecería mi todo compromiso y sería una adición agradable y amigable para su equipo.<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Por lo tanto, actualmente estoy buscando un trabajo o una pasantía como un front-end desarrollador.
</p>
</div>
<div id="Experiencia" class="tabcontent" style=display:none>
<h3>Asistente de Recursos Humanos</h3>
Noviembre, 2015- Octubre, 2020<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Creación de un registro de cumplimiento para uso de la gerencia cada mes.<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Asistencia en el mantenimiento de todos los archivos en papel para el departamento de RRHH.<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Apoyo en la creación de documentación para todos los nuevos empleados, y siguió creando archivos conforme
al protocolo de RRHH.<br>
<h3>Asistente de Recepción<br></h3>
Julio 2013- Junio 2015<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Apoyo en la actualización de toda la información de beneficios, a la vez que ampliaba los conocimientos relacionados
con los beneficios para los empleados.<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Conducta profesional, agradable y trabajadora en el día a día.
</div>
<div id="Educacion" class="tabcontent" style=display:none>
<h3>Licenciatura en Recusos Humanos</h3>
Febrero 2009 - Octubre, 2013<br> Graduado magna cum laude. Escritor principal de la revista universitaria El León.<br>
<h3>Master en Ciencia Datos</h3>
Febrero 2015- Octubre, 2017<br> Universidad Nacional
</div>
<div id="Habilidades" class="tabcontent" style=display:none>
<h3>Habilidades</h3>
<p>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Ingles Avanzado<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Portugues Intermedio<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">SQL <br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Power BI <br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Photoshop<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Python
</p>
</div>
</div>
<footer>
</footer>

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

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%;
}
}
`
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 */
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.
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

Why is my transform scale not working with Bootstrap?

I'm a total beginner to this. I'm just learning bootstrap and I realized that the animation breaks if I apply it (only the scaling bit). It works just fine without Bootstrap. Is there any other alternative?
HTML
<main class="row g-0 align-items-center">
<div class="col-md-6 g-0 ">
<div class="left_side text-center ">
<h1 class="titulo_index">¿Quienes Somos?</h1>
<p class="texto_index">Desde 1933 tostamos nuestro propio café.
Lo cuidamos desde la selección de sus granos, hasta la taza, conservando el amor y el respeto que tenemos por lo que hacemos, desde el primer día. Por eso nuestro café es <strong> ÚNICO.</strong>
</p>
<a id="i_link" class="index_link" href="menu.html">¡Conoce nuestro menu!</a>
</div>
</div>
</main>
CSS
.index_link{
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 40px;
padding: 10px 20px 10px 20px;
width: 400px;
color: black;
background-color: #d99771;
border: #442b0c 2px solid;
border-radius: 25px;
text-align: center;
text-transform: capitalize;
text-decoration: none;
transition: 0.3s;
box-shadow: 3px 5px 3px black;
}
.index_link:hover{
background-color: #dbb098;
scale: 1.2;
box-shadow: 10px 10px 8px black;
}
It does not work because the a has display: inline;.
You can just add .d-block or .d-inline-block to have the scale applied.
<a id="i_link" class="index_link d-inline-block" href="menu.html">¡Conoce nuestro menu!</a>
.index_link {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 40px;
padding: 10px 20px 10px 20px;
width: 400px;
color: black;
background-color: #d99771;
border: #442b0c 2px solid;
border-radius: 25px;
text-align: center;
text-transform: capitalize;
text-decoration: none;
transition: 0.3s;
box-shadow: 3px 5px 3px black;
}
.index_link:hover {
background-color: #dbb098;
scale: 1.2;
box-shadow: 10px 10px 8px black;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<main class="row g-0 align-items-center">
<div class="col-md-6 g-0 ">
<div class="left_side text-center ">
<h1 class="titulo_index">¿Quienes Somos?</h1>
<p class="texto_index">Desde 1933 tostamos nuestro propio café. Lo cuidamos desde la selección de sus granos, hasta la taza, conservando el amor y el respeto que tenemos por lo que hacemos, desde el primer día. Por eso nuestro café es <strong> ÚNICO.</strong>
</p>
<a id="i_link" class="index_link d-inline-block" href="menu.html">¡Conoce nuestro menu!</a>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
Alternatively, you can set the display in your CSS.
.index_link {
display: inline-block;
}
.index_link {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 40px;
padding: 10px 20px 10px 20px;
width: 400px;
color: black;
background-color: #d99771;
border: #442b0c 2px solid;
border-radius: 25px;
text-align: center;
text-transform: capitalize;
text-decoration: none;
transition: 0.3s;
box-shadow: 3px 5px 3px black;
}
.index_link:hover {
background-color: #dbb098;
scale: 1.2;
box-shadow: 10px 10px 8px black;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<main class="row g-0 align-items-center">
<div class="col-md-6 g-0 ">
<div class="left_side text-center ">
<h1 class="titulo_index">¿Quienes Somos?</h1>
<p class="texto_index">Desde 1933 tostamos nuestro propio café. Lo cuidamos desde la selección de sus granos, hasta la taza, conservando el amor y el respeto que tenemos por lo que hacemos, desde el primer día. Por eso nuestro café es <strong> ÚNICO.</strong>
</p>
<a id="i_link" class="index_link" href="menu.html">¡Conoce nuestro menu!</a>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

Impossible to enter values via an input

I would like to enter a value into the input, but nothing happens. However, after 2 clicks the image is selected automatically.
I don't understand why I can't enter values in the input? I think it's an HTML/CSS problem?
Here is a screenshot
Thank you very much for your help and your time.
ol.wrapper_digipass {
margin: 0 0 0 15px;
padding: 0;
}
.title_digipass {
font-weight: 700;
padding-bottom: 5px;
}
.information_digipass {
padding-top: 5px;
}
.instruction_digipass {
list-style: circle;
padding-bottom: 10px;
font-size: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.logoDigipass {
position: relative;
height: 110px;
width: 130px;
}
.logoDigipass img {
position: absolute;
top: -31px;
left: -12px;
}
.logoDigipass1 {
position: relative;
padding: 0;
}
.logoDigipass1 img {
height: 125px;
margin-left: -25px;
}
.wrapper_digipass {
position: relative;
}
.section_instruction {
margin-top: -60px;
padding-bottom: 35px;
}
.width30 {
width: 30%;
}
.width42 {
width: 42%;
}
.width434 {
width: 434px
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="section_digipass">
<ol class="wrapper_digipass">
<li class="title_digipass">Utilisez votre digipass.</li>
<p class="information_digipass">Après avoir réactivé votre digipass et introduit votre code PIN, celui-ci demande quelle application vous souhaitez utiliser.</p>
<ul class="instruction_digipass">
<li>Appuyez sur le chiffre "2"</li>
<li>Introduisez d'abord les 6 <u>chiffres</u> soulignés extraits du code SVM du titre <u>000347075</u> , qui sont <strong>007075</strong></li>
<li>Introduisez le nombre de titres de l'opération, donc 10, suivant le format : <strong>000010</strong></li>
<li>Le digipass vous fournit un code de 6 chiffres à introduire dans la zone de confirmation</li>
</ul>
<li class="title_digipass">Introduisez le code de 6 chiffres affichés par le digipass.</li>
<div class="wrapper_digipass">
<div class="logoDigipass1">
<img src="https://via.placeholder.com/150">
</div>
<div class="section_instruction">
<div class="row">
<div class="col-6 col-form-label text-end width42">
<label for="code">Code de confirmation</label>
</div>
<div class="col-4 width434">
<input type="text " id="code" name="code" class="form-control d-inline width30 "> et cliquez ensuite sur <strong>"Confirmer ".</strong>
</div>
</div>
</div>
</div>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
As others suggested in the comments above, logoDigipass1 is overlapping section_instruction.
To solve this problem add this to your CSS:
.section_instruction {
position: relative; /* Add this */
z-index: 1; /* Add this */
}
See the snippet below.
ol.wrapper_digipass {
margin: 0 0 0 15px;
padding: 0;
}
.title_digipass {
font-weight: 700;
padding-bottom: 5px;
}
.information_digipass {
padding-top: 5px;
}
.instruction_digipass {
list-style: circle;
padding-bottom: 10px;
font-size: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.logoDigipass {
position: relative;
height: 110px;
width: 130px;
}
.logoDigipass img {
position: absolute;
top: -31px;
left: -12px;
}
.logoDigipass1 {
position: relative;
padding: 0;
}
.logoDigipass1 img {
height: 125px;
margin-left: -25px;
}
.wrapper_digipass {
position: relative;
}
.section_instruction {
margin-top: -60px;
padding-bottom: 35px;
position: relative; /* Add this */
z-index: 1; /* Add this */
}
.width30 {
width: 30%;
}
.width42 {
width: 42%;
}
.width434 {
width: 434px
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="section_digipass">
<ol class="wrapper_digipass">
<li class="title_digipass">Utilisez votre digipass.</li>
<p class="information_digipass">Après avoir réactivé votre digipass et introduit votre code PIN, celui-ci demande quelle application vous souhaitez utiliser.</p>
<ul class="instruction_digipass">
<li>Appuyez sur le chiffre "2"</li>
<li>Introduisez d'abord les 6 <u>chiffres</u> soulignés extraits du code SVM du titre <u>000347075</u> , qui sont <strong>007075</strong></li>
<li>Introduisez le nombre de titres de l'opération, donc 10, suivant le format : <strong>000010</strong></li>
<li>Le digipass vous fournit un code de 6 chiffres à introduire dans la zone de confirmation</li>
</ul>
<li class="title_digipass">Introduisez le code de 6 chiffres affichés par le digipass.</li>
<div class="wrapper_digipass">
<div class="logoDigipass1">
<img src="https://via.placeholder.com/150">
</div>
<div class="section_instruction">
<div class="row">
<div class="col-6 col-form-label text-end width42">
<label for="code">Code de confirmation</label>
</div>
<div class="col-4 width434">
<input type="text " id="code" name="code" class="form-control d-inline width30 "> et cliquez ensuite sur <strong>"Confirmer ".</strong>
</div>
</div>
</div>
</div>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Problems styling UL with table-cell

I want to show my the section "How it works" of my website like this:
https://codepen.io/carlosmr/pen/NVbbmx
The problem is that if the text is too long at the right the numbers at the left grow with it, like in number 4.
Is there a way to leave the numbers at the left and the text at the right without that problem? Thanks!
.uli {
list-style: none;
float: left;
width: 100%;
padding: 0;
}
.uli li {
padding-bottom: 80px;
float: left;
width: 100%;
position: relative;
}
.uli li span {
border-radius: 50%;
border: 1px solid #eaeaea;
width: 100px;
height: 100px;
line-height: 30px;
margin-right: 10px;
background-color: #eaeaea;
display: inline-block;
position: relative;
text-align: center;
display: table-cell;
vertical-align: middle;
color: #fff;
font-size: 3em;
}
.uli li:before {
content: '';
position: absolute;
top: 0;
width: 2px;
height: 100%;
left: 49px;
background: #eaeaea;
z-index: -1;
}
.uli li:last-child:before {
display: none;
}
.uli .ulcontent{
display: table-cell;
vertical-align: middle;
padding-left: 100px;
}
.entry-content .uli > li{
list-style-type: none;
}
<ul class="uli">
<li>
<span>1</span>
<div class="ulcontent">
<h3>Primer contacto</h3>
<p>Contactas conmigo y me cuentas tu idea. Si quieres puedes hacerlo Aquí</p>
</div>
</li>
<li>
<span>2</span>
<div class="ulcontent">
<h3>Consultoría web</h3>
<p>Organizamos una entrevista para conocernos y aclarar las bases del proyecto.</p>
</div>
</li>
<li>
<span>3</span>
<div class="ulcontent">
<h3>Diseño web</h3>
<p>Empieza la creación de un diseño para tu proyectos basado en las necesidades del mismo</p>
</div>
</li>
<li>
<span>4</span>
<div class="ulcontent">
<h3>Desarrollo</h3>
<p>Una vez se apruebe el diseño definitivo comenzamos la fase de desarrollo, en la cual se programa el tema totalmente desde cero y se le añaden todas las funcionalidades a la web</p>
</div>
</li>
<li>
<span>5</span>
<div class="ulcontent">
<h3>Implementación</h3>
<p>En este momento se añade el contenido, se personaliza y se traslada a tu servidor para que puedas administrarlo tu mismo</p>
</div>
</li>
<li>
<span>6</span>
<div class="ulcontent">
<h3>Consultoría previa</h3>
<p>Nos reuniremos por videoconferencia para conocernos y sentar las bases de lo que será tu nuevo sitio de membresía. ¿Estás listo? ¡Vamos allá!</p>
</div>
</li>
</ul>
You can add the below styles to the <span> tag which is inside the <li> tag.
display: block;
float: left;
line-height: 100px;
Check the edited codepen
Edited version