Skip to main content
Se anexo un ejemplo
Origen Enlace
JuankGlezz
  • 5.6k
  • 10
  • 34
  • 59

Ejemplo de como seria con las media queries

Con esto debería de ser responsivo nuevamente

/*Comienza los modals con las características GENERALES (class)*/

/*Este es en general donde se mete todo*/

.caracs{
    width: 460px !important;
    font-family: 'Poppins', sans-serif;
}
@media (min-width: 768px) { .caracs{
    width: 500px !important;
    font-family: 'Poppins', sans-serif;
} }
@media (min-width: 992px) { .caracs{
    width: 810px !important;
    font-family: 'Poppins', sans-serif;
} }
@media (min-width: 1200px) { .caracs{
    width: 810px !important;
    font-family: 'Poppins', sans-serif;
} }

/*div izquierdo*/
.nombre-datos{
    display: inline-block; /*Necesario para que los divs estén en el mismo renglón*/
    width: 250px !important;
    font-size: 0.8em;
    text-align: justify;
}
    .valoracion{
        height: 35px;
        background-color: orange;
        color: white;
        padding-top: 8px;
        padding-left: 10px;
        font-size: 1.5em !important;
    }

    .filtros{
        padding-top: 5px;
        font-size: 1.2em;
    }
/*div-derecho*/
.mas-datos{
    vertical-align: top; /*Necesario para que el 2° div a la derecha comience desde arriba*/
    display: inline-block;
}
    .so{
        display: inline-block;
        width: 235px;
        background-color: #f2f2f2;
    }
    .hardsoft-xtra{
        display: inline-block;
        width: 275px;
    }
    .nivel{
        background-color: #dbdbdb;
    }

/*Terminan los modals con las características GENERALES (class)*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal2">
  Launch demo modal
</button>

<div class="modal fade" id="modal2" role="dialog">
        <div class="modal-dialog modal-lm  caracs">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="nombre-datos">
                        <img src="media/buscadoresInternet/google.png" alt="Bing">
                        <p><b>Google</b> es sin duda el mejor buscador actualmente, ya que mantiene estrictos estándares
                            de calidad a lo largo de sus productos y permite una búsqueda sumamente personalizada.</p>
                        <p class="text-right"><a href="https://www.bing.com/?setlang=es" target="_blank">Usar ahora</a></p>
                        <div class="valoracion">
                            <p>Valoración: <b>10</b></p>
                        </div>
                        <div class="filtros">
                            <p>¿Requiere internet?: <b>Sí</b></p>
                            <p>¿Gratuito?: <b>Sí</b></p>
                            <p>Pagos integrados: <b>No</b></p>
                        </div>
                    </div>
                    <div class="mas-datos">
                        <div class="so text-center">
                            <p>Sistema operativo</p>
                        </div>
                        <div class="hardsoft-xtra text-center">
                            <p>Hardware/Software extra</p>
                        </div>
                        <div class="nivel text-center">
                            <p>Nivel educativo</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Ejemplo de como seria con las media queries

Con esto debería de ser responsivo nuevamente

/*Comienza los modals con las características GENERALES (class)*/

/*Este es en general donde se mete todo*/

.caracs{
    width: 460px !important;
    font-family: 'Poppins', sans-serif;
}
@media (min-width: 768px) { .caracs{
    width: 500px !important;
    font-family: 'Poppins', sans-serif;
} }
@media (min-width: 992px) { .caracs{
    width: 810px !important;
    font-family: 'Poppins', sans-serif;
} }
@media (min-width: 1200px) { .caracs{
    width: 810px !important;
    font-family: 'Poppins', sans-serif;
} }

/*div izquierdo*/
.nombre-datos{
    display: inline-block; /*Necesario para que los divs estén en el mismo renglón*/
    width: 250px !important;
    font-size: 0.8em;
    text-align: justify;
}
    .valoracion{
        height: 35px;
        background-color: orange;
        color: white;
        padding-top: 8px;
        padding-left: 10px;
        font-size: 1.5em !important;
    }

    .filtros{
        padding-top: 5px;
        font-size: 1.2em;
    }
/*div-derecho*/
.mas-datos{
    vertical-align: top; /*Necesario para que el 2° div a la derecha comience desde arriba*/
    display: inline-block;
}
    .so{
        display: inline-block;
        width: 235px;
        background-color: #f2f2f2;
    }
    .hardsoft-xtra{
        display: inline-block;
        width: 275px;
    }
    .nivel{
        background-color: #dbdbdb;
    }

/*Terminan los modals con las características GENERALES (class)*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal2">
  Launch demo modal
</button>

<div class="modal fade" id="modal2" role="dialog">
        <div class="modal-dialog modal-lm  caracs">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="nombre-datos">
                        <img src="media/buscadoresInternet/google.png" alt="Bing">
                        <p><b>Google</b> es sin duda el mejor buscador actualmente, ya que mantiene estrictos estándares
                            de calidad a lo largo de sus productos y permite una búsqueda sumamente personalizada.</p>
                        <p class="text-right"><a href="https://www.bing.com/?setlang=es" target="_blank">Usar ahora</a></p>
                        <div class="valoracion">
                            <p>Valoración: <b>10</b></p>
                        </div>
                        <div class="filtros">
                            <p>¿Requiere internet?: <b>Sí</b></p>
                            <p>¿Gratuito?: <b>Sí</b></p>
                            <p>Pagos integrados: <b>No</b></p>
                        </div>
                    </div>
                    <div class="mas-datos">
                        <div class="so text-center">
                            <p>Sistema operativo</p>
                        </div>
                        <div class="hardsoft-xtra text-center">
                            <p>Hardware/Software extra</p>
                        </div>
                        <div class="nivel text-center">
                            <p>Nivel educativo</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Origen Enlace
JuankGlezz
  • 5.6k
  • 10
  • 34
  • 59

Deja de ser responsivo porque le estas diciendo que tenga un tamaño predeterminado con !important y si tiene un tamaño fijo pero eso depende de la pantalla donde se este ejecutando el modal.

Bootstrap utiliza media queries de CSS que varean según el tamaño de la pantalla 750px, 970px o 1170px.

Entonces tendrías que definir esos media queries según el tamaño de la pantalla.

te dejo este link para las media queries de developer mozilla

y como anexo te dejo las media queries que se utilizan en bootstrap