Как я могу получить 2 адаптивных контейнера, чтобы они отображались рядом на рабочем столе и располагались сверху на мобильном устройстве? - PullRequest
Новая
       1

Как я могу получить 2 адаптивных контейнера, чтобы они отображались рядом на рабочем столе и располагались сверху на мобильном устройстве?

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

Я не могу найти способ переместить текст абзаца / описания справа от видео. Я хочу, чтобы он находился ниже видео (отзывчиво) при использовании мобильного телефона.

https://jsfiddle.net/48xzvyrs/

Я попытался использовать метод inline-block, text-align, кажется, ничего не дает! Пожалуйста, покажите мне пример кода о том, что я могу сделать, чтобы это исправить!

CSS 

@import url('https://fonts.googleapis.com/css?family=Work+Sans:200');
h1 {
    color: #8A8A8A;

}

p{
    color: black;
    font-size:1.2vw;

}

#roundCorners1 {
  width: 100%;
  display: inline-block;
}

.clearfix {
  overflow: auto;
}

.video {
  border: 5px;
  border-style: none solid none none;
  border-color: blue;
  display: inline-block;
  margin-bottom: 25px;
  height: 300px; width: 600px; padding-right:5%;
}
.paragraph {
 display: inline-block;
  margin-bottom: 25px;
  height: 300px; width: 600px;
}
/* The block of code below tells the browsers what to do on a screen that has a width of 320px or less */

@media screen and (max-width: 320px) {

  .video {
  width: 90%;
  display: block; /* Stops it from floating */
  margin: auto; /* Ensures that it is centered */
  margin-bottom: 25px; /* Space between the stacked elements */

  }

   .paragraph {
  width: 90%;
  display: block; /* Stops it from floating */
  margin: auto; /* Ensures that it is centered */
  margin-bottom: 25px; /* Space between the stacked elements */

  }


   #rightBorder {
  width: 100%;
  display: block; /* Stops it from floating */
  margin: auto; /* Ensures that it is centered */
  margin-bottom: 25px; /* Space between the stacked elements */

  }


}

HTML 

<div class="container" style="
background-color:white; 
padding-bottom: 30px;
font-family: 'Work Sans', sans-serif;"
id="rightBorder">

<div class="clearfix">
<h1 style="text-align:right; padding-right:5%;margin-top: 0px;">Episode 1</h1>

<div class="video">
<div style="width: 100%; max-width: 600px; max-height: 392px; padding-right:5%;"><div style="position: relative; padding-bottom: calc(56.25% + 55px); width: 100%; display: inline-block;"><iframe frameborder="0" scrolling="no" allowfullscreen allow="autoplay" src="https://sermons.faithlife.com/embed/sermons/374580" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
</div>

<div class="paragraph">
<p> 
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br>Listen to Scott Lindsay's insight on local churches in Bellingham
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br>
</p>
</div>



</div>
<br><br>

1 Ответ

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

Сделайте элемент .video гибкой коробкой и снимите ограничения width: 

.video {
  border: 5px;
  border-style: none solid none none;
  border-color: blue;
  margin-bottom: 25px;
  height: 300px;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}

Кроме того, попытайтесь реорганизовать ваш html, чтобы он был немного более читабельным, чтобы избежать множества ошибок при разборе или проблем (вы пропустили два </div> закрывающих тега в конце).

...