Hola compañeros!
Estoy teniendo bastantes problemas con un responsive design que tengo entre manos.
Aquí lo tenéis, para que podáis situaros:
development.mastertrading.es
Si estáis en un ordenador lo más probable es que os aparezca bien maquetada (ahora pondré un pantallazo de cómo debe ser).
El problema lo estoy teniendo con pantallas menores: smartphones, pantallas antiguas de resolución 4:3 y algunas tablets... paso a explicaros mi problema:
En pantallas menores, el ipad de la mitad de la web se hace demasiado grande (es un background de un container) y pasa a ocupar casi toda la sección media. Me encuentro qué:
El formulario de e-mail y botón, o bien pasa a ocupar la lína siguiente al vídeo y consecuentemente desplaza el resto de la página, haciéndola ver horrible :lol: O bien queda donde debe estar, pero por encima del fondo; lo cual hace que quede antiestético e incluso ilegible.
La solución que he pensado es usar media-queries y también porcentajes, lo he intentado y no ha resultado porque no soy capaz de emplazar bien el iFrame dentro de la tablet, es por ello que lo he dejado en su estado original y vengo a ver qué se os ocurre. En el futuro será mucho más fácil porque el vídeo será de una fuente propia y no de youtube, pero necesito una solución temporal.
Os pongo el código, que me había olvidado jajaja
Código HTML:
<section id="MasterTrading Presentación" class="index-main-section">
<!--ahora una sección interior que contiene el vídeo y el capture-->
<section id="MasterTrading Video" class="index-section-video">
<!-- wrapping div para el vídeo de presentación-->
<div id="Video de presentacion" class="div-video-presentacion">
<iframe width="441" height="332" src="//www.youtube.com/embed/E9XQ2MdNgKY" frameborder="0" allowfullscreen></iframe>
</div>
<!--El meme viene ahora-->
<div id="Meme" class="div-meme-index">
<!--texto-->
<div class="div-meme-index-texto">
Yo opero en directo,
<br />
Tu <span class="span-meme">observas, aprendes y ganas.</span>
</div>
<div class="div-meme-index-capture">
<input type="text" placeholder="e-mail" class="form-capture-input">
<input type="submit" value="ENTRAR" class="form-capture-submit">
</div>
</div>
</section>
</section>
Código CSS:
Ver original.index-main-section{
width:100%;
height:600px;
background-image:url(index-files/cafeteria.jpg);
background-size:cover;
background-repeat:no-repeat;
}
.index-section-video{
width:100%;
height:600px;
padding-top:74px;
background-image:url(index-files/ipad-no-bc-2.png);
background-repeat:no-repeat;
background-position:left;
}
.div-video-presentacion{
width:441px;
height:332px;
margin-top:20px;
margin-left:186px;
float:left;
position:relative;
}
.div-meme-index{
width:25%;
float:right;
margin-right:10%;
margin-top:10em;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
.div-meme-index-texto{
font-size:23px;
font-weight:200;
color:#FFF;
text-align:center;
width:100%;
}
.span-meme{
font-weight:700;
color: #00e01f;
text-shadow:1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000
}
.div-meme-index-capture{
margin-top:30px;
}
.form-capture-input{
width:70%;
float:left;
height:40px;
border-radius:20px;
margin-top:5px;
background:#FFF;
border:1px solid #555;
padding:0 25px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
.form-capture-submit{
width:25%;
height:50px;
font-size:0.8em;
background:#00e01f;
border:1px solid #555;
border-radius:15px;
margin-left:2.5%;
-webkit-transition: background 0.3s,
font-size 0.3s;
-moz-transition: background 0.3s,
font-size 0.3s;
-transition: background 0.3s,
font-size 0.3s;
}
Muchas gracias chicos, os adoraré si damos con la solución
Aquí está la maquetación como más o menos debería quedar (el video es de ejemplo)
