HTML Help - Featuring text below images.

[Scribbles4321]

Hello!

I'm fairly new to HTML. Here is a screenshot of my website below, where these 5 pictures will always line up next to each other

 

What I want, is for text to directly appear under each one of these 5 pictures without breaking the arrangement of these 5 pictures. I've been trying to do this for the longest time, but the website seems to keep breaking.

 

I want the text to stay under each picture despite the resizing of the window that the page is displayed in.

 

For those who want to review this, the HTML file is located in the zip and the CSS starts at line 41 (css is in the html file) and the section of HTML tat corresponds to the picture in the screenshot is in line 194. Thank you

 

 

src.zip

[Scribbles4321]

If you'd like me to submit any section of my code, please do ask. Thank you

[C2dan88]

Wrap the item images in another containing div, so each store item has both an image and a text-container elements 

<div class="image-section">

    ...

      <div class="item-container">
        <img src="images/newarrivals/bestsellers_1.png">
        <div class="text-container">
          <div class="shoe-name">Shoe Name 1</div>
          <div class="price">from $100</div>
        </div>
      </div>
      
     ...
     
</div>

You repeat the code between the ... for however many items for each per row.

 

CSS for .item-container will be

        .image-section .item-container {
            margin: 5px;
            max-width: calc(20% - 10px); /* 20% width for each image with 10px margin */
            height: auto;
            float: left;
        }

 

[Scribbles4321]

19 minutes ago, C2dan88 said:

Wrap the item images in another containing div, so each store item has both an image and a text-container elements 

<div class="image-section">

    ...

      <div class="item-container">
        <img src="images/newarrivals/bestsellers_1.png">
        <div class="text-container">
          <div class="shoe-name">Shoe Name 1</div>
          <div class="price">from $100</div>
        </div>
      </div>
      
     ...
     
</div>

You repeat the code between the ... for however many items for each per row.

 

CSS for .item-container will be

        .image-section .item-container {
            margin: 5px;
            max-width: calc(20% - 10px); /* 20% width for each image with 10px margin */
            height: auto;
            float: left;
        }

 

I tried this, it seems to break the sizing of my images

 

I may be doing something wrong here?

[Vicarian]

18 hours ago, Scribbles4321 said:

I tried this, it seems to break the sizing of my images

 

I may be doing something wrong here?

@Scribbles4321Check your .image-section img selector.  I changed your width from a calc to 100%.  With @C2dan88's markup, the images are now contained in a separate div that has its own height and width, so it will control how they display:

[wasab]

hey, please finish a tutorial on flex box. it makes things like this very easy. 

[Scribbles4321]

5 hours ago, Vicarian said:

@Scribbles4321Check your .image-section img selector.  I changed your width from a calc to 100%.  With @C2dan88's markup, the images are now contained in a separate div that has its own height and width, so it will control how they display:

Oh yes, I got it to work now. Thank you so much for your help

 

@C2dan88 Thank you so much for helping me, I wouldn't have had this working without you