Poner texto debajo de una imagen , responsive

fedefrankk · #1 (**permalink**) 18/05/2018, 14:24

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<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link type="text/css" href="estilos/adaptativeflex.css" rel="stylesheet" />
<script src="prefix.js" ></script>
</head>
 
 
<body>
 
<div class="contenedor">
        <header>
            <div class="logo">
                <img src="images/logo.jpg" width="150" alt="">
                <a href="#">FEDE</a>
            </div>
 
            <nav>
                <a href="#">Inicio</a>
                <a href="#">Blog</a>
                <a href="#">Proyectos</a>
                <a href="#">Contacto</a>
            </nav>
        </header>
 
        <section class="main">
            <article>
                
<img src="imgpublicidad/6767.jpeg" width="300" height="255">  
ESTE TEXTO QUIERO QUE SALGA ABAJO DE LA FOTO. COMO DESCRIPCION Y NO ALADO...
<img src="imgpublicidad/6767.jpeg" width="300" height="255"> 
<img src="imgpublicidad/6767.jpeg" width="300" height="255">  
<img src="imgpublicidad/6767.jpeg" width="300" height="255">   
<img src="imgpublicidad/6767.jpeg" width="300" height="255"> 
<img src="imgpublicidad/321.jpeg" width="300" height="255">  
 
            </article>
        </section>
<!-- <aside>
            <div class="widget">
                <div class="imagen"></div>
            </div>
 
            <div class="widget">
                <div class="imagen"></div>
            </div>
        </aside>-->
        
 
        <footer>
            <section class="links">
                <a href="#">Inicio</a>
                <a href="#">Blog</a>
                <a href="#">Proyectos</a>
                <a href="#">Contacto</a>
            </section>
 
            <div class="social">
                <a href="#">FB</a>
                <a href="#">TW</a>
            </div>
        </footer>
    </div>
</body>
</html>

y el codigo CSS

Código CSS:

Ver original@charset "utf-8";
/* CSS Document */
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
.contenedor {
    background:#ccc;
    width:90%;
    max-width:1024px;
    margin:auto;
 
    /* Flexbox */
    display:flex;
    flex-flow:row wrap;
}
 
body {
    background:#e9e9e9;
}
 
header {
    background:#2c3e50;
    width:100%;
    padding:20px;
 
    /* Flexbox */
    display: flex;
    justify-content:space-between;
    align-items:center;
 
    flex-direction:row;
    flex-wrap:wrap;
}
 
header .logo {
    color:#fff;
    font-size:30px;
}
 
header .logo img {
    width:50px;
    vertical-align: top;
}
 
header .logo a {
    color:#fff;
    text-decoration: none;
    line-height:50px;
}
 
header nav {
    width:50%;
    /* Flexbox */
 
    display:flex;
    flex-wrap:wrap;
    align-items:center;
}
 
header nav a {
    background:#c0392b;
    color:#fff;
    text-align: center;
    text-decoration: none;
    padding:10px;
 
    /* Flexbox */
    flex-grow:1;
}
 
header nav a:hover {
    background:#e74c3c;
}
 
.main {
    background:#fff;
    padding:20px;
 
    flex:1 1 70%;
    /*flex:1;*/
}
 
.main article {
    margin-bottom: 20px;
    padding-bottom:20px;
    border-bottom:1px solid #000;
}
 
.main article:nth-last-child(1){
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom:none;
}
 
aside {
    background:#e67e22;
    padding:20px;
    /*FLEX*/
    flex:1 1 30%;
    /*flex:0 0 300px;*/
 
    display: flex;
    flex-wrap:wrap;
    flex-direction:column;
    justify-content:flex-start;
}
 
aside .widget {
    background: #d35400;
    height:150px;
    margin:10px;
}
 
footer {
    background:#2c3e50;
    width: 100%;
    padding:20px;
 
    /* Flexbox */
    display: flex;
    flex-wrap:wrap;
    justify-content:space-between;
}
 
footer .links {
    background:#c0392b;
    display:flex;
    flex-wrap:wrap;
}
 
footer .links a {
    flex-grow:1;
 
    color:#fff;
    padding:10px;
    text-align: center;
    text-decoration:none;
}
 
footer .links a:hover {
    background:#E74C3C;
}
 
footer .social {
    background:#e67e22;
}
 
footer .social a {
    color:#fff;
    text-decoration: none;
    padding:10px;
    display: inline-block;
}
 
@media screen and (max-width: 800px) {
    .contenedor {
        flex-direction:column;
    }
 
    header {
        flex-direction:column;
        padding:0;
    }
 
    header .logo {
        margin:20px 0;
    }
 
    header nav {
        width: 100%;
    }
 
    aside {
        flex-direction:row;
        flex:0;
    }
 
    aside .widget {
        flex-grow:1;
    }
}
 
@media screen and (max-width: 600px) {
    aside {
        flex-direction:column;
    }
 
    footer {
        justify-content:space-around;
    }
}

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

anfergon · #2 (**permalink**) 20/05/2018, 23:38

Cada imagen y cada párrafo los tienes que poner dentro de un div con ancho igual al de la imagen. El div tiene que tener la propiedad float en left o right para que queden una junto a la otra.

mpozo · #3 (**permalink**) 23/05/2018, 09:29

Usa el tag figure de html5 https://developer.mozilla.org/en-US/...Element/figure