i'm working now with media query and once i reach the breakpoint of 768px the text goes

all below the images, not following them.

I would like the text to follow the images and to be under each one once it reach the 768px breakpoint.

any suggestion to avoid this problem?

thanks.

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  
  
}

.grid {
    display: grid;
grid-template-columns: repeat(3, 1fr);
    margin-top: 200px;
    grid-gap: 20px;
  justify-content: center;
  align-content: center; 
}

@media (max-width: 768px) {

    /* navbar */

    * {
    margin: 0;
    box-sizing: border-box;
}


.nav-links, .search{
    display: none;
}


.logo {
  height: 64px;
  width: 126px;
  filter: invert(100%);
  padding: 1px;

}

/* contenuto1 */

.grid {
    display: flex;
    flex-wrap: wrap;
    margin-top: 100px;
    grid-gap: 150px;
  }

<div >
    <h2>In evidenza</h2>
  </div>
  
  
  <div >
    <div >
      <img src="1w.webp" />
      <img src="2w.webp" />
      <img src="3w.webp" />
      <figcaption >I riflessi fluidi dell'autunno</figcaption>
      <figcaption >Maglieria</figcaption>
      <figcaption >Scarpe Made In Italy</figcaption>
     
    </div>
    </div>

CodePudding user response：

Try this:

.grid-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction:row;
  margin-top: 100px;
  }
img {
  width: 100%;
  object-fit: contain;  
}

 .grid{
   width:31%;
   margin:1%;
  }

@media (max-width: 768px) {

    /* navbar */

    * {
    margin: 0;
    box-sizing: border-box;
}


.nav-links, .search{
    display: none;
}


.logo {
  height: 64px;
  width: 126px;
  filter: invert(100%);
  padding: 1px;

}
  .grid{
    width:100%;
  }
  .caption{
    margin:10px auto 25px;
  }
}


 

<div >
    <h2>In evidenza</h2>
  </div>
  
  
  <div >
    <div >
      <img src="1w.webp" />
      <figcaption >I riflessi fluidi dell'autunno</figcaption>
    </div>
    <div >
      <img src="2w.webp" />
      <figcaption >Maglieria</figcaption>
    </div>
    <div >
      <img src="3w.webp" />
      <figcaption >Scarpe Made In Italy</figcaption>
     
    </div>
    </div>

you need to put img and figcaption inside the grid element and use Flex instead of Grid some codes:

CodePudding user response：

Put <img> and <figcaption> inside <figure>:

<figure>
   <img src="1w.webp" />
   <figcaption >I riflessi fluidi dell'autunno</figcaption>
</figure>
<figure>
   <img src="2w.webp" />
   <figcaption >Maglieria</figcaption>
</figure>

CodePudding user response：

I suggest you do not use a grid unless you know how to manipulate it. I suggest you use display flex because it's easier to manipulate and more simple.

and to put text under each image, you must understand the importance of HTML structure for that. so put each image with its text in a container, then style them according to that.

I used display flex here:

img {
    width: 100%;
    min-width: 300px;
    height: 100%;
    object-fit: contain;
    
    
  }
  
  .grid {
      display: flex;
  /* grid-template-columns: repeat(3, 1fr); */
      margin-top: 200px;
      grid-gap: 20px;
    justify-content: center;
    align-content: center; 
    flex-direction: row;
  }

  .container  {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  @media only screen and (max-width: 768px) {
  
      /* navbar */
  
      * {
      margin: 0;
      box-sizing: border-box;
  }
  
  
  .nav-links, .search{
      display: none;
  }
  
  
  .logo {
    height: 64px;
    width: 126px;
    filter: invert(100%);
    padding: 1px;
  
  }

  .grid {
  
  flex-direction: column;
}

img {
    width: 80%;
    min-width: 200px;    
}
  
  /* contenuto1 */
  
  /* .grid {
      display: flex;
      flex-wrap: wrap;
      margin-top: 100px;
      grid-gap: 150px;
    } */
}

 
  <div >
    <h2>In evidenza</h2>
  </div>
  
  
  <div >
    <div >
      <div  >
        <img src="1w.webp" />
        <figcaption >I riflessi fluidi dell'autunno</figcaption>
      </div>
      <div  >
        <img src="2w.webp" />
        <figcaption >Maglieria</figcaption>
      </div>
      <div  >
        <img src="3w.webp" />
        <figcaption >Scarpe Made In Italy</figcaption>
      </div>
      
     
    </div>
    </div>