0

Hola estoy teniendo un problema con la visualizacion de un sitio que arme, resulta que lo chequee en los modo mobile que trae chrome, mozilla y se ve perfecto, ahora lo chequeo desde mi celular en cualquier navegador y se ve desarmado, me pasa exclusivamente en IOS. el sitio es este el código

#programas .programa-puente {
position: absolute;
z-index: 999;
left: 0;
}
#programas .programa-puente .caja {
z-index: 999;
color: #fff;
padding: 25px 10px;
margin-top: 17%;
}
#programas .programa-compromiso {
position: absolute;
z-index: 999;
right: 0;
}
#programas .programa-compromiso .caja {
z-index: 999;
color: #fff;
padding: 25px 10px;
margin-top: 17%;
float: right;
}
#programas .programa-compromiso .caja img {
margin-bottom: 10px;
float: right;
clear: both;
}
#programas .programa-puente .caja img {
margin-bottom: 10px;
clear: both;
/* float: left; */
text-align: left;
}
#programas .programa-puente .caja .btn-informacion-del-programa {
background-color: #ce3629;
padding: 14px 40px;
margin-top: 10px;
font-family: 'stainlesscond-lightregular';
text-transform: uppercase;
border-radius: initial;
color: #fff;
text-align: center;
clear: both;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
position: relative;
z-index: 9;
letter-spacing: 1px;
}
#programas figure.snip1212 {
  font-family: 'stainlesscond-lightregular';
  color: #fff;
  position: relative;
  float: left;
  overflow: hidden;
  background-color: #ffffff;
  color: #000000;
  text-align: left;
  font-size: 16px;
  height:484px;
  width: 100%

}
#programas figure.snip1212 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
#programas figure.snip1212 .image {
  max-width: 100%;
  vertical-align: top;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 100% 0;
}
#programas figure.snip1212 figcaption {
  top: 88%;
  left: 20px;
  right: 40px;
  text-align: left;
  position: absolute;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}
#programas figure.snip1212 figcaption h3{
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 1px;
}
#programas figure.snip1212 .date,
#programas figure.snip1212 i {
  background-color: #e41c14;
  top: 25px;
  color: #fff;
  left: 25px;
  min-height: 60px;
  min-width: 60px;
  position: absolute;
  text-align: center;
}
#programas figure.snip1212 .date,
#programas figure.snip1212 .icon {
  background-color: #e41c14;
  top: 25px;
  color: #fff;
  left: 25px;
  min-height: 60px;
  min-width: 60px;
  position: absolute;
  text-align: center;
}
#programas figure.snip1212 .date {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
}
#programas figure.snip1212 .date span {
  display: block;
  line-height: 30px;
}
#programas figure.snip1212 .date .month {
  font-size: 16px;
  background-color: rgba(0, 0, 0, 0.1);
}

#programas figure.snip1212 .icon {
  line-height: 60px;
  font-size: 30px;
/*   -webkit-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
  -webkit-transition-delay: 0s;
  transition-delay: 0s; */
    min-width: 50px;
    min-height: 52px;
    padding: 20px;

}
#programas figure.snip1212 h3,
#programas figure.snip1212 p {
  margin: 0;
  padding: 0;
}
#programas figure.snip1212 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
 #programas figure.snip1212:hover img,
#programas figure.snip1212.hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

#programas figure.snip1212:hover i,
#programas figure.snip1212.hover i {
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
#programas figure.snip1212:hover .icon,
#programas figure.snip1212.hover .icon {
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="programas"> 
        <section>
          <div class="container-fluid sin-padding">
            <div>
                <div style="right: 0;top: 0;z-index: 24;background-size: cover;   background-position: center;">
                <figure class="snip1212">
                  <img class="image img-responsive" src="http://qkstudiodemo.com/fundacionlomanegra/html/images/img-programa-puente.jpg" alt="..."/>
                </figure> 
                </div>

                  <div class="container" style="position: relative;height: 148px;">
                    <div class="col-lg-6 pull-left programa-puente">
                      <div class="caja-programa">                     
                        <div class="caja">
                         <img class="image img-responsive" src="http://qkstudiodemo.com/fundacionlomanegra/html/images/logo-puente.png" alt="...">
                         <p>Inserción laboral de jóvenes para un primer empleo.</p>
                         <a href="" class="btn btn-informacion-del-programa">MÁS INFORMACIÓN</a>
                        </div>                          
                      </div>
                    </div>
                    <div class="col-lg-6 pull-right programa-puente-2">
                    </div>                
                  </div>
            </div>
            
            <div class="clearfix"></div>

            <div>
                <div style="right: 0;top: 0;z-index: 24;background-size: cover;   background-position: center;">
                  <figure class="snip1212">
                    <img class="image img-responsive" src="http://qkstudiodemo.com/fundacionlomanegra/html/images/img-programa-compromiso.jpg" alt="..."/>
                  </figure> 
                </div>

                  <div class="container" style="position: relative;height: 148px;">
                    <div class="col-lg-6 pull-left programa-puente">
                    </div>
                    <div class="col-lg-6 pull-right programa-compromiso">
                      <div class="caja-compromiso">                     
                        <div class="caja">
                         <img class="image img-responsive" src="http://qkstudiodemo.com/fundacionlomanegra/html/images/logo-compromiso.png" alt="...">
                         <p>Voluntariado corporativo y desarrollo de base.</p>
                         <a href="" class="btn btn-informacion-del-programa">MÁS INFORMACIÓN</a>
                        </div>                          
                      </div>                      
                    </div>                
                  </div>
            </div> 

            <div class="clearfix"></div> 

            <div>
                <div style="right: 0;top: 0;z-index: 24;background-size: cover;   background-position: center;">
                <figure class="snip1212">
                  <img class="image img-responsive" src="http://qkstudiodemo.com/fundacionlomanegra/html/images/negocios-exclusivos.jpg" alt="..."/>
                </figure> 
                </div>

                  <div class="container" style="position: relative;height: 148px;">
                    <div class="col-lg-6 pull-left programa-puente">
                      <div class="caja-programa">                     
                        <div class="caja">
                         <h2>Programa de <strong>Negocios Inclusivos</strong></h2>
                         <p>Apoyo a emprendimientos.</p>
                         <a href="" class="btn btn-informacion-del-programa">MÁS INFORMACIÓN</a>
                        </div>                          
                      </div>
                    </div>
                    <div class="col-lg-6 pull-right programa-puente-2">
                    </div>                
                  </div>
            </div>                      
          </div>
        </section>
</div>

que use adjunto abajo.

6
  • Hola, lo chequeaste desde tu celular? yo cuando lo veo por mi celular que es un iphone 6 se me ve todo desarmado, lo chequee en safari y en chrome, sin embargo en los simuladores de celular en desktop se ve perfecto.
    – MarianoF
    Commented el 3 feb. 2018 a las 15:10
  • en la pregunta hay un enlace al sitio online para corroborar
    – MarianoF
    Commented el 3 feb. 2018 a las 15:11
  • En realidad el diseño esta planteado asi y el cliente lo aprobo asi, lo que a mi me interesa es que el contenido que esta encima de la imagen quede dentro de la grilla del container de 1170px y que cuando uno lo vea en distinto desktop se mantenga ahí y no se mueva, se comprende?.
    – MarianoF
    Commented el 3 feb. 2018 a las 16:36
  • Claro entiendo! entonces como podría resolverlo para que me quede bien? para que el contenido quede encima de la imagen. tendría que crear una instancia para mobile y ocultarlo para desktop?
    – MarianoF
    Commented el 4 feb. 2018 a las 15:06
  • por que si a esto mismo que arme le pongo un row, en la instancia mobile me genera como un blanco del lado derecho
    – MarianoF
    Commented el 4 feb. 2018 a las 15:07

2 respuestas 2

0

Quizás esto te puede ayudar:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Fuente: https://emiliocobos.net/meta-viewport-html/

Tambien, la clase col-lg-* hacen referencia a un grid de desktop. Quizás ayudaría utilizar col-sm-* (mas o menos una tablet) o col-xs-*(telefonos). Sobre esto tienes mas información en: https://getbootstrap.com/docs/3.3/css/#grid

1
  • Hola gracias por contestar, en realidad el meta esta puesto y por otro lado las clases si las implemente bien, lo que no entiendo es cuando lo visualizo en un celular se ve desarmado y en los simuladores de los navegadores se ve perfecto. es medio raro la verdad. porque yo use los elemento que están por encima de la imagen flotando con un posicionamiento absoluto no se si eso esta bien implementado o que.
    – MarianoF
    Commented el 3 feb. 2018 a las 14:46
0

En tu caso solamente estas diciendole a boostrap que la columna es lg-6 (desktop)

Te falto especificar las columnas para movil / tablets. Boostrap Docs

Agrega:

 col-sm-6 col-xs-6

Ejemplo Boostrap Mobile / Desktop Grid

introducir la descripción de la imagen aquí

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="programas"> 
        <section>
          <div class="container-fluid sin-padding">
            <div>
                <div style="right: 0;top: 0;z-index: 24;background-size: cover;   background-position: center;">
                <figure class="snip1212">
                  <img class="image img-responsive" src="http://qkstudiodemo.com/fundacionlomanegra/html/images/img-programa-puente.jpg" alt="..."/>
                </figure> 
                </div>

                  <div class="container" style="position: relative;height: 148px;">
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pull-left programa-puente">
                      <div class="caja-programa">                     
                        <div class="caja">
                         <img class="image img-responsive" src="http://qkstudiodemo.com/fundacionlomanegra/html/images/logo-puente.png" alt="...">
                         <p>Inserción laboral de jóvenes para un primer empleo.</p>
                         <a href="" class="btn btn-informacion-del-programa">MÁS INFORMACIÓN</a>
                        </div>                          
                      </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-6 col-xs-6 col-md-6 pull-right programa-puente-2">
                    </div>                
                  </div>
            </div>
            
            <div class="clearfix"></div>

            <div>
                <div style="right: 0;top: 0;z-index: 24;background-size: cover;   background-position: center;">
                  <figure class="snip1212">
                    <img class="image img-responsive" src="http://qkstudiodemo.com/fundacionlomanegra/html/images/img-programa-compromiso.jpg" alt="..."/>
                  </figure> 
                </div>

                  <div class="container" style="position: relative;height: 148px;">
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pull-left programa-puente">
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pull-right programa-compromiso">
                      <div class="caja-compromiso">                     
                        <div class="caja">
                         <img class="image img-responsive" src="http://qkstudiodemo.com/fundacionlomanegra/html/images/logo-compromiso.png" alt="...">
                         <p>Voluntariado corporativo y desarrollo de base.</p>
                         <a href="" class="btn btn-informacion-del-programa">MÁS INFORMACIÓN</a>
                        </div>                          
                      </div>                      
                    </div>                
                  </div>
            </div> 

            <div class="clearfix"></div> 

            <div>
                <div style="right: 0;top: 0;z-index: 24;background-size: cover;   background-position: center;">
                <figure class="snip1212">
                  <img class="image img-responsive" src="http://qkstudiodemo.com/fundacionlomanegra/html/images/negocios-exclusivos.jpg" alt="..."/>
                </figure> 
                </div>

                  <div class="container" style="position: relative;height: 148px;">
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pull-left programa-puente">
                      <div class="caja-programa">                     
                        <div class="caja">
                         <h2>Programa de <strong>Negocios Inclusivos</strong></h2>
                         <p>Apoyo a emprendimientos.</p>
                         <a href="" class="btn btn-informacion-del-programa">MÁS INFORMACIÓN</a>
                        </div>                          
                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pull-right programa-puente-2">
                    </div>                
                  </div>
            </div>                      
          </div>
        </section>
</div>

6
  • Hola Juan como estas? gracias por contestar, te hago una consulta: eso puedo influenciar que no haya asignado las demás col-?
    – MarianoF
    Commented el 3 feb. 2018 a las 15:43
  • Si entiendo tu pregunta, te refieres a los divs que no tengan definido col-* ? Dependiendo de donde esten los que tengan col-* y que clase les pongas (lg,xs,sm,md), modificaran el contenido. - Prueba el snippet que te coloque arriba, y ingresa nuevamente desde mobile.
    – Juan
    Commented el 3 feb. 2018 a las 15:48
  • @ElectricMarian viendo el codigo fuente de la pagina linkeada, solamente estas dandole medidas movil (col-sm) a algunos divs entre los col-lg-6. Debe ser eso que hace que se visualize raro, ya que tiene una parte diciendole que algunos divs se vean movil y otros sigan en desktop.
    – Juan
    Commented el 3 feb. 2018 a las 15:54
  • 1
    Ok! voy a probar entonces lo que me comentas juan y ver si funciona.
    – MarianoF
    Commented el 3 feb. 2018 a las 16:37
  • Funciono @electricmarian ?
    – Juan
    Commented el 14 feb. 2018 a las 2:01

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.