1

para mis títulos en mi página usé Display Property de Bootstrap 5.1 y mostrar un título exclusivo para celulares y otro que solo se mira en Laptop y PC, adjunto un ejemplo:

<h1 class="text-center display-3 mb-2 d-none d-sm-block d-sm-none d-md-block">Visible solo en pantallas grandes</h1>
<h1 class="text-center display-5 mb-1 d-block d-sm-none d-sm-block d-md-none">Visible solo para móviles xs y sm</h1>

Eso funciona perfecto y quiero hacer lo mismo con mis 2 botones, quiero que al verse mi página desde un celular, los botones obtengan la clase btn-sm o en su caso, se hagan más pequeños.

Probé estas 2 cosas:

1- CSS: Dado que la clase sm abarca hasta el 768px, usé esto para hacer más pequeños los botones pero no funcionó.

@media (max-width: 767px) {
  .btn {
    height: 50%;
  }
}

2- Display Property de Bootstrap:

Al igual que con los H1 que puse de ejemplo, intenté hacer lo mismo y funciona, pero el problema es que al tener la misma ID causa un conflicto en la consola. NO puedo usar diferentes ID puesto que sería un problema para mi código javascript.

<!--botón visible para PC/Laptop-->
<button type="button" class="btn btn-primary d-sm-none d-md-block d-none d-sm-block" id="submit">Iniciar</button>
<!--Botón visible para móviles-->
<button type="button" class="btn btn-primary btn-sm d-block d-sm-none d-sm-block d-md-none" id="submit">Iniciar</button>

Adjunto comparación de un botón sm y uno normal con este método:

comparación

Y la serie de errores que me arroja la consola porque tengo ID's duplicados:

consola

¿Cuál es la mejor manera de hacerlo? Gracias de antemano.

2
  • Prueba poniendo esto: @media only screen and (max-width: 767px) { en lugar de @media (max-width: 767px) { a ver si tienes suerte
    – masterguru
    Commented el 5 abr. 2022 a las 17:53
  • 1
    En cuanto al punto 2, si no puedes cambiar el ID es que estás haciendo mal tu código javscript y solo puede darte problemas. Si quieres que ambos elementos compartan algo en javascript usa clases comunes en lugar de ID. Por definición el ID nunca debe estar repetido por muy cómodo que te parezca. Han de ser únicos (a ver, tampoco es que vaya a explotar la página si los duplicas, pero puedes tener comportamientos no esperados si los usas así)
    – masterguru
    Commented el 5 abr. 2022 a las 17:56

1 respuesta 1

2

Hice esta función usando solamente JavaScript y CSS (Sin Bootstrap). Aunque es un poco largo el código, el resultado final es satisfactorio.

Puede que haya otra manera mucho mejor, pero yo hice uso de JavaScript y onload, y onresize; luego declarando en un if la misma medida de pantalla en CSS, y pasarle los estilos.

al final quedo todo así, viendo el resultado en desktop y en móvil:

window.onload = function () {
    actualizar();
}

window.onresize = function () {
    actualizar();
}

function actualizar() {

var anchura = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h1 = document.getElementsByClassName("desktop")[0];
var boton = document.getElementsByClassName("btn")[0];

if(anchura <= 767) {

    h1.classList.remove("desktop");
    h1.classList.add("movil");
    
    boton.classList.remove("desktop");
    boton.classList.add("movil");

    h1.innerHTML = "Título en móvil";
    boton.innerHTML = "Iniciar en móvil pequeño";

}

}
h1.desktop {
    color: red;
}

.btn.desktop {
    width: 300px;
    height: 50px;
    text-align: center;
    color: #fff;
    background-color: #000;
}

@media (max-width: 767px) {

h1.movil {
    color: green;
}

.btn.movil {
    width: auto;
    height: auto;
    padding: 0 5px;
    background-color: lightgreen;
}

}
<h1 class="title desktop">Titulo en desktops</h1>
<button type="button" class="btn desktop" id="submit">Iniciar en desktops grande</button>

Es importante usar window.onload para que funcione al cargarse la pagina. Tambien es importante usar window.onresize para que funcione cuando no se cargue la pagina, pero sí al cambiar el tamaño de pantalla.

El resultado no se distingue aquí porque ya se cargó window.onload. En vista móvil puse colores verde y cambiando los textos del h1 y el botón.

En resumen, ¿para qué sirve esto? Es para usar el mismo título h1 y el mismo botón en todas las @media o pantalla, sin tener que agregar otro elemento u otro ID, o duplicar elementos. Solamente se quita y se agrega clases y textos.

3
  • Muchas gracias! Funciona bien, pero no logro adaptarlo a Bootstrap para que agregue la clase btn-sm, no hay error de sintaxis pero de igual forma no funciona :(. Pero de nuevo gracias por la ayuda! Este código me funcionó: JsFiddle Commented el 6 abr. 2022 a las 11:03
  • Es raro que no funcione. Cambiaste bien boton.classList.add("movil") por boton.classList.add("btn-sm") ? ... Commented el 6 abr. 2022 a las 17:22
  • 1
    La respuesta es solo un demo, falta que adaptes bien a tu página Commented el 6 abr. 2022 a las 17:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.