2

Tengo problemas a la hora de abrir mi ventana modal, cuando la abro, los estilos hacen que esta se vea muy pequeña. concretamente este estilo que afecta todo el HTML hace que mi ventana modal se vea muye pequeña


html {
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-padding-top: 7rem;
    scroll-behavior: smooth;
}

El 'font-zise: 62.5%' hace que la ventana modal se vea muy pequeña pero no puedo eliminar ese estilo porque todos los demas estilos de la pagina dependen de ese y se ve muy feo todo lo demas en la pagina.

Esta es la ventana modal:

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Ayuda, quiero que encontrar una forma de que el estilo de "font-size: 62.5%;" no me afecte la ventana modal pero si todo lo demas en el HTML.

1 respuesta 1

1

Puedes probar con la siguiente seudo clase: :not() (No confundir con seudo elementos).

html {
    overflow-x: hidden;
    scroll-padding-top: 7rem;
    scroll-behavior: smooth;
}

html:not(.modal) {
    font-size: 62.5%;
}

esto es para todos los contenidos en HTML, excepto la clase .modal.

2
  • no funciona, se comporta exactamente igual como si fuera poniendo la etiqueta font-size en el selector "html" Commented el 3 abr. 2022 a las 3:26
  • Encierra la clase .modal entre comillas: html:not('.modal') { y deberia funcionarte
    – masterguru
    Commented el 3 abr. 2022 a las 7:08

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.