Foros del Web » Creando para Internet » CSS »

Problema con Bootstrap y celulares

Estas en el tema de Problema con Bootstrap y celulares en el foro de CSS en Foros del Web. Buenas, estoy maquetando un sitio con bootstrap 3.0 rc1 y andaba todo bien, hasta que probando como se veria con en los celulares con tamaños ...
  #1 (permalink)  
Antiguo 05/08/2013, 21:25
Avatar de destor77  
Fecha de Ingreso: noviembre-2004
Ubicación: Gálvez, Santa Fe, Argentina
Mensajes: 2.654
Antigüedad: 20 años
Puntos: 43
Problema con Bootstrap y celulares

Buenas,
estoy maquetando un sitio con bootstrap 3.0 rc1 y andaba todo bien, hasta que probando como se veria con en los celulares con tamaños 320x402px, note que las noticias se ven muy mal:



el código que estoy usando para ese sector es este:
Código HTML:
Ver original
  1. <div class="container">
  2.        
  3.  
  4.         <div class="row">
  5.     <img class="img-responsive sep" src="website/template/images/sep_noticias.jpg" alt="noticias"/>
  6.             <div class="col-6 col-sm-6 col-lg-6">
  7.             <article class="row">
  8.                 <div class="col-4 col-sm-4 col-lg-4">
  9.                     <img src="http://localhost/pbcortos//images/images/Lofinews.jpg" style=" width:146px; height:146px;" alt="LO-FI de Milton Secchi, el corto ganador del 7º Festival Pizza, Birra y Cortos" />                </div>
  10.                 <div class="col-8 col-sm-8 col-lg-8">
  11.                     <section class="noticia">
  12.                         <p class="fecha">15/10/2012</p>
  13.                         <h2>LO-FI de Milton Secchi, el corto ganador del 7º Festival Pizza, Birra y Cortos</h2>
  14.                         <p>
  15.     El jurado integrado por Vanessa Ragone, Hernan Guerschuny, Maria Canale y Fernando Varea otorg&oacute; al realizador santafesino el Primer Premio en las categor&iacute;as mejor ficci&oacute;n y mejor cortometraje.</p>                                                    <!--<p><a href="noticias/lo-fi_de_milton_secchi_el_corto_ganador_del_7_festival_pizza_birra_y_cortos.php" >seguir leyendo &raquo;</a></p>-->
  16.                                                 </section>
  17.                 </div>
  18.             </article>
  19.         </div>
  20.  
  21.             <div class="col-6 col-sm-6 col-lg-6">
  22.             <article class="row">
  23.                 <div class="col-4 col-sm-4 col-lg-4">
  24.                     <img src="http://localhost/pbcortos//images/images/news%20grilla.jpg" style=" width:146px; height:146px;" alt="Días, horarios y actividades" />                </div>
  25.                 <div class="col-8 col-sm-8 col-lg-8">
  26.                     <section class="noticia">
  27.                         <p class="fecha">08/10/2012</p>
  28.                         <h2>Días, horarios y actividades</h2>
  29.                         <p>
  30.     </p>                                                    <!--<p><a href="noticias/dias_horarios_y_actividades.php" >seguir leyendo &raquo;</a></p>-->
  31.                                                 </section>
  32.                 </div>
  33.             </article>
  34.         </div>
  35.  
  36.             <div class="col-6 col-sm-6 col-lg-6">
  37.             <article class="row">
  38.                 <div class="col-4 col-sm-4 col-lg-4">
  39.                     <img src="http://localhost/pbcortos//images/images/news%20todos%20tenemos%20un%20plan.jpg" style=" width:146px; height:146px;" alt="Película Invitada Cierre del Festival 'Todos tenemos un plan'" />                </div>
  40.                 <div class="col-8 col-sm-8 col-lg-8">
  41.                     <section class="noticia">
  42.                         <p class="fecha">02/10/2012</p>
  43.                         <h2>Película Invitada Cierre del Festival "Todos tenemos un plan"</h2>
  44.                         <p>
  45.     Pel&iacute;cula protagonizada por Viggo Mortensen, Soledad Villamil, Daniel Fanego y Sofia Gala Castiglione. Dirigida por Ana Piterbarg.</p>                                                    <!--<p><a href="noticias/pelicula_invitada_cierre_del_festival_todos_tenemos_un_plan_.php" >seguir leyendo &raquo;</a></p>-->
  46.                                                 </section>
  47.                 </div>
  48.             </article>
  49.         </div>
  50.  
  51.             <div class="col-6 col-sm-6 col-lg-6">
  52.             <article class="row">
  53.                 <div class="col-4 col-sm-4 col-lg-4">
  54.                    
  55.               <img src="website/template/images/noticia.jpg" alt="Actividades Especiales: Mesa 3 (charla con Juan Mascardi y Sandra Rivaben)" />
  56.                               </div>
  57.                 <div class="col-8 col-sm-8 col-lg-8">
  58.                     <section class="noticia">
  59.                         <p class="fecha">02/10/2012</p>
  60.                         <h2>Actividades Especiales: Mesa 3 (charla con Juan Mascardi y Sandra Rivaben)</h2>
  61.                         <p>
  62.     <span style="font-size:12px;"><strong>Charla 1</strong></span> - Disertante: Juan Mascardi / Tema: De las cr&oacute;nicas period&iacute;sticas al docuweb (escribir la telara&ntilde;a).</p>
  63. <p>
  64.     <span style="font-size:12px;"><strong>Charla 2 - </strong>Disertante: Sandra Rivaben / Tema: Programa Polos Audiovisuales Tecnol&oacute;gicos</span>.</p>                                                    <!--<p><a href="noticias/actividades_especiales_mesa_3_charla_con_juan_mascardi_y_sandra_rivaben_.php" >seguir leyendo &raquo;</a></p>-->
  65.                                                 </section>
  66.                 </div>
  67.             </article>
  68.         </div>
  69.  
  70.     </div>
  71.         </div>

como podria solucionarlo para que quede o una noticia por fila con imagen + texto, o el texto debajo de la imagen y seguir teniendo 2 noticias por fila.

Desde ya muchas gracias!

Etiquetas: bootstrap
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:26.