0

Estoy haciendo una aplicación donde, cuando le haces click en un panel (también de Bootstrap 3) aparece un modal, el cual ya tiene una estructura interna.

Sin embargo, el problema es que parece ser que el modal tiene un width predeterminado, y cuando intento cambiarlo en mi .css con !important, parece ser que deja de ser responsivo.

Así es como me gustaría que se quedara en una pantalla de tamaño normal, tipo laptop o escritorio:

Panel con organización requerida

Aquí mi código html del modal y abajo del css en general:

        <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>

El .css

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

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


.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)*/

Pero cuando tendría que ser responsive, sucede ésto:

No jala

¿Cómo podría hacer que el modal sea responsive pero manteniendo el width que le establecí?

1
  • Por cierto, ignorar los datos y/o descripción escritos; son meramente ejemplos.
    – dawn
    Commented el 3 ago. 2016 a las 23:02

2 respuestas 2

0

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

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>

0

Este link te podra ayudar bastante https://coolestguidesontheplanet.com/bootstrap/modal.php#myModal2

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.