Сделайте div отзывчивым как svg (уменьшение текста) - PullRequest
Новая
       34

Сделайте div отзывчивым как svg (уменьшение текста)

0 голосов
/ 04 сентября 2018

Так что я искал несколько дней и не могу найти способ сделать это.

Я создал сайт на WordPress, и на моей домашней странице отображаются самые последние сообщения, которые я сделал.

Дело в том, что содержание поста написано с определенным макетом, и оно должно оставаться таким. Расположение не может измениться! Мне нужно, чтобы текст оставался в том же месте, даже если он становится меньше и менее читаемым при просмотре сайта на смартфоне.

Конечно, сайт отзывчивый. Единственное, на что я не хочу реагировать - это содержание сообщения.

Я много чего пробовал, но не могу найти способ сделать это ... Эта страница показывает именно то, что я ищу, за исключением того, что я не хочу сообщение, которое может быть изменено пользователем. Мне просто нужно, чтобы соответствовать родительскому div. 

.responsive-wrapper {
  border: 3px solid black;
}

.post-content {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
}

.txt-top-right {
  display: block;
  float: right;
  margin-left: auto;
  padding-right: 20px;
}

.txt-under-top-right {
  clear: both;
}

.txt-center {
  text-align: center;
}

.post-content img {
  display: block;
  max-width: 200px;
  float: right;
  padding-right: 20px;
}
<div class="responsive-wrapper">
  <div class="post-content">
    <p class="txt-top-right"><em>Div right-top corner</em></p>

    <p class="txt-under-top-right">
      Div following the one on right-top corner
    </p>

    <div class="txt-center">
      <h2>h2 in the middle of the page</h2>
      <h1>h1 in the middle of the page</h1>
      <h3>h3 in the middle of the page</h3>
    </div>

    <img src="http://cs.pes.edu/wp-content/uploads/2016/06/default.jpg" />

    <p>
      paragraph<br> on the left side<br> of the page<br> describing<br> a lot of things<br> on a lot of lines
    </p>

    <p>
      Adress<br> City<br> Country
    </p>
  </div>
</div>

Я понимаю HTML / CSS / JS, но я борюсь с JavaScript ... Я могу вставить некоторые теги <script> в мой html-заголовок с функциями в нем, но мне трудно понять, что делают эти функции.

Мне бы хотелось, чтобы макет оставался таким же, независимо от того, на каком устройстве находится пользователь. Например, я хочу, чтобы абзац .txt-top-right занимал такое количество места. На смартфоне размер шрифта не должен изменяться и занимать больше, чем этот объем пространства контейнера ...

Это пример того, что происходит сейчас при изменении размера окна. Раскладка полностью меняется!

Спасибо за чтение, надеюсь, это было достаточно ясно:)

...