Tema: Poner texto debajo de una imagen , responsive
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 18/05/2018, 14:24
Avatar de fedefrankk
fedefrankk
 
Fecha de Ingreso: agosto-2007
Mensajes: 871
Antigüedad: 17 años, 3 meses
Puntos: 7
Pregunta Poner texto debajo de una imagen , responsive
Hola a todos, he copiado de un vídeo de youtube una web que se adapta a los teléfonos y pantallas de las compu, mi idea es hacer una galería de imágenes con una descripción de cada imagen, pero cuando pongo un texto me sale del lado derecho de la imagen y no se como arreglarlo...

Espero que me den una mano ya que estoy atorado en ese punto....

para ver el ejemplo de como sale es aqui:

http://www.atk20.com/2/


codigo HTML


Código HTML: 
Ver original
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Documento sin título</title>
  6. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <link type="text/css" href="estilos/adaptativeflex.css" rel="stylesheet" />
  8. <script src="prefix.js" ></script>
  9. </head>
  10.  
  11.  
  12. <body>
  13.  
  14. <div class="contenedor">
  15.         <header>
  16.             <div class="logo">
  17.                 <img src="images/logo.jpg" width="150" alt="">
  18.                 <a href="#">FEDE</a>
  19.             </div>
  20.  
  21.             <nav>
  22.                 <a href="#">Inicio</a>
  23.                 <a href="#">Blog</a>
  24.                 <a href="#">Proyectos</a>
  25.                 <a href="#">Contacto</a>
  26.             </nav>
  27.         </header>
  28.  
  29.         <section class="main">
  30.             <article>
  31.                 
  32. <img src="imgpublicidad/6767.jpeg" width="300" height="255">  
  33. ESTE TEXTO QUIERO QUE SALGA ABAJO DE LA FOTO. COMO DESCRIPCION Y NO ALADO...
  34. <img src="imgpublicidad/6767.jpeg" width="300" height="255"> 
  35. <img src="imgpublicidad/6767.jpeg" width="300" height="255">  
  36. <img src="imgpublicidad/6767.jpeg" width="300" height="255">   
  37. <img src="imgpublicidad/6767.jpeg" width="300" height="255"> 
  38. <img src="imgpublicidad/321.jpeg" width="300" height="255">  
  39.  
  40.             </article>
  41.         </section>
  42. <!-- <aside>
  43.             <div class="widget">
  44.                 <div class="imagen"></div>
  45.             </div>
  46.  
  47.             <div class="widget">
  48.                 <div class="imagen"></div>
  49.             </div>
  50.         </aside>-->
  51.         
  52.  
  53.         <footer>
  54.             <section class="links">
  55.                 <a href="#">Inicio</a>
  56.                 <a href="#">Blog</a>
  57.                 <a href="#">Proyectos</a>
  58.                 <a href="#">Contacto</a>
  59.             </section>
  60.  
  61.             <div class="social">
  62.                 <a href="#">FB</a>
  63.                 <a href="#">TW</a>
  64.             </div>
  65.         </footer>
  66.     </div>
  67. </body>
  68. </html>

y el codigo CSS

Código CSS: 
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. * {
  5.     margin: 0;
  6.     padding: 0;
  7.     box-sizing: border-box;
  8. }
  9.  
  10. .contenedor {
  11.     background:#ccc;
  12.     width:90%;
  13.     max-width:1024px;
  14.     margin:auto;
  15.  
  16.     /* Flexbox */
  17.     display:flex;
  18.     flex-flow:row wrap;
  19. }
  20.  
  21. body {
  22.     background:#e9e9e9;
  23. }
  24.  
  25. header {
  26.     background:#2c3e50;
  27.     width:100%;
  28.     padding:20px;
  29.  
  30.     /* Flexbox */
  31.     display: flex;
  32.     justify-content:space-between;
  33.     align-items:center;
  34.  
  35.     flex-direction:row;
  36.     flex-wrap:wrap;
  37. }
  38.  
  39. header .logo {
  40.     color:#fff;
  41.     font-size:30px;
  42. }
  43.  
  44. header .logo img {
  45.     width:50px;
  46.     vertical-align: top;
  47. }
  48.  
  49. header .logo a {
  50.     color:#fff;
  51.     text-decoration: none;
  52.     line-height:50px;
  53. }
  54.  
  55. header nav {
  56.     width:50%;
  57.     /* Flexbox */
  58.  
  59.     display:flex;
  60.     flex-wrap:wrap;
  61.     align-items:center;
  62. }
  63.  
  64. header nav a {
  65.     background:#c0392b;
  66.     color:#fff;
  67.     text-align: center;
  68.     text-decoration: none;
  69.     padding:10px;
  70.  
  71.     /* Flexbox */
  72.     flex-grow:1;
  73. }
  74.  
  75. header nav a:hover {
  76.     background:#e74c3c;
  77. }
  78.  
  79. .main {
  80.     background:#fff;
  81.     padding:20px;
  82.  
  83.     flex:1 1 70%;
  84.     /*flex:1;*/
  85. }
  86.  
  87. .main article {
  88.     margin-bottom: 20px;
  89.     padding-bottom:20px;
  90.     border-bottom:1px solid #000;
  91. }
  92.  
  93. .main article:nth-last-child(1){
  94.     margin-bottom: 0;
  95.     padding-bottom: 0;
  96.     border-bottom:none;
  97. }
  98.  
  99. aside {
  100.     background:#e67e22;
  101.     padding:20px;
  102.     /*FLEX*/
  103.     flex:1 1 30%;
  104.     /*flex:0 0 300px;*/
  105.  
  106.     display: flex;
  107.     flex-wrap:wrap;
  108.     flex-direction:column;
  109.     justify-content:flex-start;
  110. }
  111.  
  112. aside .widget {
  113.     background: #d35400;
  114.     height:150px;
  115.     margin:10px;
  116. }
  117.  
  118. footer {
  119.     background:#2c3e50;
  120.     width: 100%;
  121.     padding:20px;
  122.  
  123.     /* Flexbox */
  124.     display: flex;
  125.     flex-wrap:wrap;
  126.     justify-content:space-between;
  127. }
  128.  
  129. footer .links {
  130.     background:#c0392b;
  131.     display:flex;
  132.     flex-wrap:wrap;
  133. }
  134.  
  135. footer .links a {
  136.     flex-grow:1;
  137.  
  138.     color:#fff;
  139.     padding:10px;
  140.     text-align: center;
  141.     text-decoration:none;
  142. }
  143.  
  144. footer .links a:hover {
  145.     background:#E74C3C;
  146. }
  147.  
  148. footer .social {
  149.     background:#e67e22;
  150. }
  151.  
  152. footer .social a {
  153.     color:#fff;
  154.     text-decoration: none;
  155.     padding:10px;
  156.     display: inline-block;
  157. }
  158.  
  159. @media screen and (max-width: 800px) {
  160.     .contenedor {
  161.         flex-direction:column;
  162.     }
  163.  
  164.     header {
  165.         flex-direction:column;
  166.         padding:0;
  167.     }
  168.  
  169.     header .logo {
  170.         margin:20px 0;
  171.     }
  172.  
  173.     header nav {
  174.         width: 100%;
  175.     }
  176.  
  177.     aside {
  178.         flex-direction:row;
  179.         flex:0;
  180.     }
  181.  
  182.     aside .widget {
  183.         flex-grow:1;
  184.     }
  185. }
  186.  
  187. @media screen and (max-width: 600px) {
  188.     aside {
  189.         flex-direction:column;
  190.     }
  191.  
  192.     footer {
  193.         justify-content:space-around;
  194.     }
  195. }

Le agradezco de antemano su tiempo.!!
saludos a todos
fede