Текстовый div перекрывает изображение div на сетке CSS - PullRequest
Новая
       23

Текстовый div перекрывает изображение div на сетке CSS

0 голосов
/ 15 марта 2019

У меня есть страница, которая показывает детали определенного фильма. Информация представлена ​​в контейнере, в котором есть несколько элементов для постера фильма, названия, года выпуска и т. Д., И все это работает с сеткой. Проблема, с которой я столкнулся, заключается в том, что я пытаюсь сделать его отзывчивым: когда экран становится меньше, элемент div, содержащий текст, накладывается поверх элемента div афиши фильма. Уже пытались поставить оба div на один и тот же z-index, float: left и overflow: hidden

And this is the CSS

/*  SECTION Movie  */
.section {
   clear: both;
   padding: 0px;
   margin: 0px;
}

/*  COLUMN SETUP  */
.col {
   display: block;
   float:left;
}
.col:first-child { margin-left: 0rem; }

.movieDetails{
   margin-top: 10rem;
   overflow: hidden;
}
/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWO  */
.span_1_of_2 {
  width: 30%;
}
.span_2_of_2{
   width: 70%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
   .col { 
     margin: 1% 0 1% 0%;
 }
}

@media only screen and (max-width: 480px) {
   .span_1_of_2, .span_2_of_2  { width: 100%; }
}
<!-- Father container -->
<div class="screenContainer" id="movieContainer">

  <div class="movieTop section group ">
      <button id =  "addToList" title="Add to my list"><strong>+</strong></button>
    <!-- Movie poster -->
    <div class=" first col span_1_of_2">
    <span class="movie-element box1">
      <figure>
        <img id="movie-picture">
      </figure>
    </span>
  </div>
    <div class="movieDetails col span_2_of_2">
      <!-- Movie Title  -->
      <div class="movie-element box2 ">
        <label for="movieTitleSpan">Title: </label>
        <span id="movie-title"></span>
      </div>

      <!-- Release year  -->
      <div class="movie-element box3">
        <label for="movieReleaseYear">Year: </label>
        <span id="movie-year"></span>
      </div>

      <!-- Rating -->
      <div class="movie-element box4">
        <label for="movieRating">Rating: </label>
        <span id="movie-rating"></span>
      </div>

      <!-- Director -->
      <div class="movie-element box5">
        <label for="movieDirector">Director: </label>
        <span id="movie-director"></span>
      </div>

      <!-- Actors -->
      <div class="movie-element">
        <label for="movieActors">Actors: </label>
        <span id="movie-actors"></span>
      </div>
    </div> <!-- End movieDetails -->

  <br>
</div> <!-- End movieTop -->
...