Tengo un sitio web creado en bootstrap, así que cuando voy en el móvil o la tableta, la barra de navegación y todo lo demás se ajustan al tamaño de la pantalla, pero he agregado 3 cuadros y 2 videos de YouTube y me gustaría que se ajusten al tamaño de la pantalla cuando Voy en el móvil o tableta. Se ve bien en mi escritorio, pero cuando miro en mi móvil, los videos y los cuadros están fuera de la pantalla. ¿Puede alguien ayudarme a hacer esto lo más rápido posible? Por favor, es muy importante hacerlo. ¿Alguien puede acompañarme paso a paso sobre cómo hacer esto? Aquí hay algunas capturas de pantalla:

HTML para los 3 cuadros que son solo imágenes

<div class="img1">
<a href="link"><img src="img"></a>
</div>

<div class="img2">
<a href="link"><img src="img"></a>
</div>

<div class="img3">
<a href="link"><img src="img"></a>
</div>

Css:

.img1 {
 position: relative;
 left: 290px;
 bottom: -20px;
}

.img3 {
 position: relative;
 left: 578px;
 bottom: 101px;
}

.img2 {
 position: relative;
 left: 865px;
 bottom: 222px;
}

Así es como se ve en mi escritorio

enter image description here

Y así es como se ve en el tamaño de una tableta, probablemente puedas imaginar cómo se ve en un móvil

enter image description here

Si desea echar un vistazo usted mismo en http://www.praga-light.de, el los videos de youtube se ven geniales tal como quería que fueran, pero los 3 cuadros cuando cambias el tamaño del navegador simplemente salen de la pantalla.

0
VBCoding 25 dic. 2016 a las 19:54

3 respuestas

La mejor respuesta

Necesita cambiar el tamaño del ancho del video de YouTube en el móvil, ¿verdad?

Agrega una envoltura div al código de video,

    <div class="ResponsiveVideoWrapper">
<iframe width="854" height="480" src="https://www.youtube.com/embed/CqVqlcBQGYw" frameborder="0" allowfullscreen=""></iframe>
</div>

Css:

.ResponsiveVideoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.ResponsiveVideoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
1
Tran 25 dic. 2016 a las 17:21

He creado un sistema de cuadrícula de bootstrap puro. Por favor, intente este código

.portfolio-item {
margin-bottom:10px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!------Strat html code-------->
<div class="col-xs-4 portfolio-item">
    <div class="embed-responsive embed-responsive-16by9">
        <a href="#">
            <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
        </a>
    </div>
</div>
<div class="col-xs-4 portfolio-item">

    <a href="#">
        <img src="http://www.planwallpaper.com/static/images/HD-Wallpapers1_FOSmVKg.jpeg" class="img-responsive">
    </a>

</div>
<div class="col-xs-4 portfolio-item">
    <div class="embed-responsive embed-responsive-16by9">
        <a href="#">
            <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
        </a>
    </div>
</div>
<!------End html code-------->
1
Sawan mishra 28 dic. 2016 a las 06:26

Sobre el bloque de imagen, no necesita div, aquí está mejor html

<div class="img1">
    <a href="/"><img src="n.png"></a>
    <a href="/"><img src="n.png"></a>
    <a href="/"><img src="n.png"></a>
</div>

<style>
.img1 {
    width: 100%;
}

.img1 a {
    display: inline-block;
    float: left;
}
<style>
0
Tran 27 dic. 2016 a las 10:08