如何确保图像和文本具有响应性？

Question

I want to have 3 movies per row and for the texts below to be on the centre relative to the image. Currently, my website looks like this (please ignore the red box, it is just for me to see the size)

In addition, when I resize my page, the title and the texts get shifted all over. How do I prevent this from happening and ensure that everything is responsive?

Codes in PHP file:

<div class="col-md-3 row movieBox">
            <img src="'.$sub_row["image"].'" class="img-responsive img-thumbnail"/>
            <h4>'.$sub_row["title"].'</h4>
            <p>'.$sub_row["movie_warning"].'</p>
            <p>'.$sub_row["movie_duration"].'</p>
</div>

Codes in CSS:

  .movieBox{
  float: left;
  display: flex;
  padding: 50px;
  margin: auto;
  margin-bottom: 10px;
  position: relative;
  border: 1px solid red;
}

/*Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Answer 1

1. You do not need float: left; or position: fixed; on either selector.

2. Flex is attempting to fit as many boxes as possible in the available width. By default it will shrink the elements as much ass possible. To fix that you can add a width to your elements and use flex-wrap to make the content wrap.

Try something like this:

.Row{
  display: flex;
  border: 1px solid red;
  flex-wrap: wrap;
  justify-content: space-between;
}

.Column{
  width: 33%;
  flex-shrink: 0;
  display: flex;
  padding: 50px;
  border: 1px solid red;
}

Answer 2

You should use CSS Grid to get the desired result. Firstly, create a three-column layout with:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /*this will create 3 equal columns*/
    grid-template-rows: auto;
    grid-gap: 1em; /*add only if you want to add some space in between the red boxes*/
}

Adding this, the items inside container class will arrange themselves in rows of threes.

Now, for the responsiveness, use media queries.

@media screen and (max-width: 480px) {
    .container {
        grid-template-columns: 1fr;  /*one-column for mobile devices*/
    }
}

Answer 3

You need two steps: 1- Use flex layout or grid layout. 2- Use media queries.

This simple example may help you CSS Flex Responsive