не работает отзывчивость, текст обрезан

Привет,

Я разрабатываю простой веб-сайт - http://sylviadieta.pl/

. Я хочу, чтобы он был отзывчивым и почти все работало, за исключением текста контактных данных вверху.

Когда я пытаюсь изменить его размер в соответствии с мобильными устройствами, текст обрезается и не отображается. Вот мой код:

 .title {


position: absolute;


top: 30%;


left: 20%;


transform: translate(-50%, -50%);


color: black;


text-align: left;


}


.title1 {


color: black;


text-align: left;


}


.titleright {


position: absolute;


top: 30%;


left: 80%;


transform: translate(-50%, -50%);


color: black;


text-align: right;


}


.titleright1 {


color: black;


text-align: right;


}

HTML: и CSS:

 <div style="width: 100%; overflow: hidden;"> <div class="title1" style="width: 700px; float: left;"> <div class="spaceleft" style="width: 20px; float: left;"> </div> <div class="textleft" style="width: 680px; margin-left: 70px; float: left;"> <h1><b>Sylwia Majewska</b></h1> <h2><b>Specjalista ds. żywienia i dietetyki</b></h2><br> <div class="spaceleft1" style="width: 70px; float: left;"> </div> <div class="textleft" style="width: 660px; margin-left: 20px; float: left;"> <p><b>„Niech pożywienie będzie lekarstwem, a lekarstwo pożywieniem.”</b></p> </div> <div class="textleft" style="width: 660px; margin-left: 380px; float: left;"> <p><b>Hipokrates (460-370 p.n.e.)</b></p> </div> </div> </div> <div class="titleright1" style="margin-left: 720px; margin-right: 70px"> <i class="fa fa-phone fa-3x" aria-hidden="true"> 501974479</i></br> <i class="fa fa-envelope" aria-hidden="true"> [email protected]</i></br> <i class="fa fa-newspaper-o" aria-hidden="true"> dietetykasylvia.blox.pl/html</i></br> <a href="[URL='https://lumtu.com/yti/OwMMwOS9odHRwczovL2ZhY2Vib29rLmNvbS9TeWxWSUEtWmRyb3dlLUM1QkJ5d2llbmllLWktRGlldG90ZXJhcGlhLTExNDU1MTk2ODg4MzM3zM4']https://www.FB.com/SylVIA-Zdrowe-Żywienie-i-Dietoterapia-1145519688833739/[/URL]">FB</a> </div> </div>

Код (CSS): Спасибо за помощь.

Прекратите использовать абсолютное позиционирование для макета.

КОНЕЧНО, он отрезан, элементы с абсолютным позиционированием больше не сообщают свою ширину и высоту своим родительским контейнерам - и при этом, если окно слишком короткое, чтобы их показать, они не будут отображаться.

То, что вы пытаетесь сделать, — это то, почему у нас есть float, flexbox или модуль CSS Grid Layout для новостей.

(хотя вы можете использовать последние два только в том случае, если вам небезразличен IE10/более ранние версии)

Также обычно глупо объявлять позиционирование в процентах, для этого просто просят положить его битами вверх лицевой стороной вниз; тем более у вас нет медиа-запросов, поэтому я не понимаю, какое отношение к чему-либо имеет адаптивный макет!

Но в целом ваша разметка — это полная и полная ерунда с бесконечным бессмысленным впустую, статическим стилем в разметке, презентационными классами, такими как «textleft» и «textright», которые сводят на нет всю причину даже использовать CSS, исправлена пиксельная метрика. ширина.... СПИСОК того, как не стоит кодировать сайт.

Учитывая то, что у вас есть, скорее всего, НУЛЕВАЯ законная причина для того, чтобы эта разметка была значительно больше:

 


body {


padding:1em;


font:normal 100%/150% arial,helvetica,sans-serif;


}


p {


padding-bottom:1em;


}


.widthWrapper {


max-width:60em;


margin:0 auto;


}


#top {


overflow:hidden; /* wrap floats */


zoom:1; /* trip haslayout, wrap floats legacy IE */


padding-bottom:1em;


text-align:right;


font-style:italic;


}


#top h1 {


float:left;


text-align:left;


font:normal 200%/120% arial,helvetica,sans-serif;


}


#top h1 small {


display:block; /* removes oddball line-height bug */


font:normal 75%/120% arial,helvetica,sans-serif;


}


#top i {


display:inline-block;


vertical-align:middle;


font:normal 100%/120% FontAwesome;


text-rendering:auto;


-webkit-font-smoothing:antialiased;


-moz-osx-font-smoothing:grayscale;


}


#top a {


font-style:normal;


}


blockquote cite {


display:block;


text-align:right;


}


@media (max-width:40em) {


#top {


text-align:center;


}


#top h1 {


float:none;


text-align:center;


padding-bottom:0.5em;


}


}

Код (разметка): внешний элемент div будет использоваться для установки максимальной ширины, чтобы длинные строки не становились громоздкими.

Если бы я хотел фиксированное дополнение, я бы поместил его в тело, а не в разметку как бессмысленный «DIV даром», как этот мусор «spaceLeft», который у вас есть.

Я почти уверен, что ваш слоган НЕ открывает новый подраздел страницы, как это и есть в H2. ОЗНАЧАЕТ, скорее всего, он должен быть частью основного заголовка (то есть того, почему у нас есть теги заголовков) для каждой страницы сайта, то есть H1. обеспечивает «уменьшение акцента», например «будет меньше по грамматическим или структурным причинам», а не «должен быть меньше». (аспект семантической разметки, утерянный многими). div#top будет использоваться для размещения плавающих элементов и выполнять двойную функцию позже, если вы захотите добавить наверх

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

У вас ЯВНО есть цитата и цитата. Да, у нас есть теги для этого.

Предполагая, что используется сброс, CSS будет примерно таким:

  <div class="widthWrapper"> <div id="top"> <h1> Sylwia Majewska<br> <small>Specjalista ds. żywienia i dietetyki</small> </h1> <div> <i>&#xf095;</i> 501974479<br> <i>&#xf0e0;</i> [email protected]<br> <i>&#xf1ea;</i> dietetykasylvia.blox.pl/html<br> <a href="[URL='https://lumtu.com/yti/OwMMwOS9odHRwczovL2ZhY2Vib29rLmNvbS9TeWxWSUEtWmRyb3dlLUM1QkJ5d2llbmllLWktRGlldG90ZXJhcGlhLTExNDU1MTk2ODg4MzM3zM4']https://www.facebook.com/SylVIA-Zdrowe-Żywienie-i-Dietoterapia-1145519688833739/[/URL]">Facebook</a> </div> <!-- #top --></div> <blockquote> <p> „Niech pożywienie będzie lekarstwem, a lekarstwo pożywieniem.” </p><p> <cite>Hipokrates (460-370 p.n.e.)</cite> </p> </blockquote> <!-- .widthWrapper --></div> 

Код (разметка): Хотя без полного содержимого страницы трудно набрать полный/правильный CSS.

Примечание.

Я перешел на шрифты без засечек, поскольку шрифты с засечками вызывают проблемы с читаемостью на дисплеях из-за низкого PPI.



(Скажите вместе со мной, с засечками для печати, без засечек для экрана! С засечками для печати, без засечек для экрана!). Я также вручную использовал Font-Awesome, потому что считаю, что их огромный бессмысленный набор классов вообще лишает смысла даже его использование! Когда он минимизирован до 31 КБ, пропустите этот шум и просто используйте таблицу поиска для правильных индексов utf-8.



В совокупности получается что-то вроде этого:

http://www.cutcodedown.com/for_others/aretai/template.html

Как и во всех моих примерах, каталог:

http://www.cutcodedown.com/for_others/aretai/

разблокирован для облегчения доступа к липким кусочкам.

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

... и увидеть медиа-запрос? ЭТО то, что делает страницу отзывчивой. Все остальное — это либо эластичный дизайн (использование шрифтов % и заполнения/ширины em), либо полугибкий макет (использование максимальной ширины).

То, как построен код, который вы представили, не имеет ничего общего с адаптивным дизайном.