Question 42917 in Html Question posted in
Some basic documentation can be found here.

How can i make the tags below every one of my images be a max of 3 per each row? (html + css, no js)

I’m new in the world of HTML + CSS (still no JS), and as a homework i have to do this (responsive for mobile, tablets and desktop/laptop PC)

Image, example from homework:

I´m doing it and is all working fine (i think so), but this part i still can´t do it (extract from the homework below)

"Then, it is required to implement a grid of <div> elements that allows reorder the page contents in a responsive manner and contains a breakpoint at 1280px, via Media Queries. After this breakpoint, the images next to their concept tags will be displayed in a quantity of 3 for each row. Each image will have at the bottom the group of labels that has associates. The maximum number of labels per row will be 3 and the border of each one of them must be delimited by at least one line."

How can I make that?

This is my code

* {
  box-sizing: border-box;
}

h1 {
  padding-top: 10px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  width: 100%;
}

h3 {
  padding-top: -10px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  width: 100%;
}

p {
  text-align: justify;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
}

img {
  width: 100%;
}


/* Dispositivos pequeños (teléfonos, 600px y menos) */

@media only screen and (max-width: 600px) {
  [class*="col-"] {
    width: 100%;
    padding: 10px;
  }
}

.etiqueta {
  display: flex;
  color: white;
  font-size: 20px;
  text-align: center;
  font-family: monospace;
  background-color: gray;
  border-style: solid gray;
  border-radius: 3px;
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  padding-left: 3px;
  margin-top: 3px;
}


/* Dispositivos medios (tablets horizontales, 768px y más) */

@media only screen and (min-width: 768px) {
  @media only screen and (min-width: 768px) {
    [class*="col-"] {
      width: 100%;
      padding: 10px;
    }
    .col-t1 {
      width: 8.33%;
    }
    .col-t2 {
      width: 16.66%;
    }
    .col-t3 {
      width: 25%;
    }
    .col-t4 {
      width: 33.33%;
    }
    .col-t5 {
      width: 41.66%;
    }
    .col-t6 {
      width: 50%;
    }
    .col-t7 {
      width: 58.33%;
    }
    .col-t8 {
      width: 66.66%;
    }
    .col-t9 {
      width: 75%;
    }
    .col-t10 {
      width: 83.33%;
    }
    .col-t11 {
      width: 91.66%;
    }
    .col-t12 {
      width: 100%;
    }
    [class*="col-"] {
      float: left;
    }
    .row::after {
      content: "";
      clear: both;
      display: table;
    }
    .etiqueta {
      display: inline-flex;
      color: white;
      font-size: 15px;
      text-align: center;
      font-family: monospace;
      background-color: gray;
      border-style: solid gray;
      border-radius: 3px;
      padding-top: 3px;
      padding-right: 3px;
      padding-bottom: 3px;
      padding-left: 3px;
      margin-top: 3px;
    }
  }
}


/* Para versión escritorio: */

@media only screen and (min-width: 1280px) {
  [class*="col-"] {
    width: 100%;
    padding: 10px;
  }
  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%;
  }
  .col-3 {
    width: 25%;
  }
  .col-4 {
    width: 33.33%;
  }
  .col-5 {
    width: 41.66%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33%;
  }
  .col-8 {
    width: 66.66%;
  }
  .col-9 {
    width: 75%;
  }
  .col-10 {
    width: 83.33%;
  }
  .col-11 {
    width: 91.66%;
  }
  .col-12 {
    width: 100%;
  }
  [class*="col-"] {
    float: left;
  }
  .row::after {
    content: "";
    clear: both;
    display: table;
  }
  .etiqueta {
    display: inline-flex;
    color: white;
    font-size: 10px;
    text-align: center;
    font-family: monospace;
    background-color: gray;
    border-style: solid gray;
    border-radius: 3px;
    padding-top: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    margin-top: 3x;
    margin-right: 3x;
    margin-bottom: 3x;
    margin-left: 3x;
  }
}
<div>
  <h1 class="formato-titulos">Galería de Imágenes</h1>
  <h3 class="formato-titulos"><strong>Fotógrafo: </strong><i>Allan Brito Delgado</i></h3>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="row">
  <div class="col-3 col-t4">
    <img src="img_ABP_individual_3.2/dados.jpg">
    <div class="etiqueta">Juegos</div>
    <div class="etiqueta">Meta</div>
    <div class="etiqueta">Dado</div>
    <div class="etiqueta">Pieza</div>
    <div class="etiqueta">Tablero</div>
  </div>
  <div class="col-3 col-t4">
    <img src="img_ABP_individual_3.2/nintendo_switch.jpg">
    <div class="etiqueta">Nintendo Switch</div>
    <div class="etiqueta">Mario Kart 8</div>
    <div class="etiqueta">Consola portátil</div>
    <div class="etiqueta">Videojuego</div>
  </div>
  <div class="col-3 col-t4">
    <img src="img_ABP_individual_3.2/luigi_yoshi_mario.jpg">
    <div class="etiqueta">Luigi</div>
    <div class="etiqueta">Mario</div>
    <div class="etiqueta">Yoshi</div>
    <div class="etiqueta">Super Mario Bros</div>
  </div>
  <div class="col-3 col-t4">
    <img src="img_ABP_individual_3.2/img_pc.jpg">
    <div class="etiqueta">PC</div>
    <div class="etiqueta">Workspace</div>
    <div class="etiqueta">Programación</div>
    <div class="etiqueta">Doble pantalla</div>
    <div class="etiqueta">Streaming</div>
  </div>
</div>

I’m trying to make below every image a max of 3 tags per row (if image have more than 3 tags, the 4th and 5th tags need to be display in a second row below the image).

Tags:

2

Answers


  1. 0

    use flex and change the width of the img’s i your media query

    img{
width:100%;
}

@media only screen and (min-width: 1280px) {
 img{
 width:33%;
 }}
    <div>
<img src = "http://placeholder.com/250">
<img src = "http://placeholder.com/250">
<img src = "http://placeholder.com/250">
<img src = "http://placeholder.com/250">
</div>
    Login or Signup to reply.
  2. 0

    i think you should first add display: flex, justify-content, and also align-items and probably flex-wrap on the main CSS and from there you can Edit on MediaQueries. Try also to change the for That would probrably make a better view or if you want to keep the div try to add a width and height.

    Sorry for my english but you have any questions just write me again, and i will try explain better

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search