Image responsiveness

hi to all the community,
https://codepen.io/mhmdozer/pen/arGWVZ

this is my problem. description here:

I have 4 photo which all in one row and class has properties grid. (class=products )

I must write title overwrite images but when I smaller the browser products class being a 2 row 2 columns (I did it whit media queries) but my title go another places. what can I do help please

In the free version of CodePen you must use the complete URL to an online image. You can use a placeholder image service like:

Block elements by default stack vertically. Your block elements are:

  • div

Inline elements sit next to each other like text. Your inline elements are:

  • a

  • img (default is inline)

  • h3 (default is block) you changed this

  • span

Here we can see that there is a div .bottom-text positioned at the bottom left of a parent div that has no height or width and some inline text with an icon from the browser that is not in the normal document flow with the other elements.

Try commenting out all your CSS except for the grid. Then

<div class="card-body">
  <div>
    <a href="#"><img src="https://placekitten.com/" alt=" "></a>
  </div>
  <h3>Series 6</h3>
  <p>Module</p>
  <p class="bottom-text">Learn More</p>
</div>

should give you a naturally vertical thing that can be styled like a card.