Блог

Пытаюсь сделать свой сайт более удобным для мобильных устройств и не могу понять предлагаемую здесь помощь. У меня есть следующая настройка, базовая страница индекса и страница css таблицы стилей. У меня есть элементы div и элементы < p>, которые заданы для всего текста на моем сайте.

 p {
    font-family: Arial;
    font-size: 20px;
    left: 150px;
    position: relative;

}
 

Это мой элемент < p>, чтобы отодвинуть его с левой стороны при просмотре на рабочем столе. Весь текст на моем сайте находится между тегами < p>, я также использую теги для того же эффекта. Я пытаюсь улучшить свою страницу для мобильного просмотра и добавил ее в свой код, но хотел бы настроить ее немного лучше.

Как бы я мог сделать так, чтобы при просмотре с мобильного устройства у него не было атрибута слева: 150 пикселей;, поэтому он лучше заполняет экран? Единственный другой фактор, который у меня есть, — это

 div {  
  width: 1000px;   
  border: 0px solid black;  
}  
div.a {  
  word-wrap: normal;  
}  
div.b {  
  word-wrap: break-word;

}  
 

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

Вы можете попробовать удалить left: 150px; и добавить text-align: center . это повлияет на рабочий стол и мобильный вид.

ИЛИ вы можете добавить этот медиа-запрос:

 @media screen AND (max-width: 767px) {
p { 
   text-align: center !important; 
 }
}
 

вы можете изменить значение максимальной ширины (max-width: 767px) и установить любую точку останова, которая вам нравится. просто измените правила css для мобильного представления и добавьте их в медиа-запрос.