Абзац остается слишком большим для просмотра на мобильных устройствах (отзывчивый дизайн)

Я новичок во всем этом. Попытка помешать моему тексту перейти на мобильный вид. Как только я изменил ширину текста в CSS, эта проблема возникла. Я не хочу, чтобы текст растягивался по всему экрану в режиме рабочего стола.

По-видимому, мой пост в основном код, и мне нужно больше деталей

Скриншоты для ПК и мобильных устройств ниже.

Рабочий стол:

Абзац остается слишком большим для просмотра на мобильных устройствах (отзывчивый дизайн)

Мобильный:

Абзац остается слишком большим для просмотра на мобильных устройствах (отзывчивый дизайн)

HTML: <!DOCTYPE html>
<html>
  <head>
    <title>Day on the Pier</title>
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
    <link rel = "stylesheet" href = "Style.css" />
  </head>

  <body>
    <header>
      <ul>
        <li>
          <a href = "Portfolio.html"
            >HOME</a
          >
        </li>
        <li>
          <a href = "experience.html"
            >EXPERIENCE</a
          >
        </li>
        <li>
          <a href = "About%20me.html"
            >ABOUT ME</a
          >
        </li>
        <li>
          <a href = "/Blog.html">BLOG</a>
        </li>
      </ul>
    </header>

    <main>
      <h1>25/02/22 A day on the Pier</h1>
      <img src = "img/pier1.jpg" alt = "pier" />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      </p>
    </main>

    <footer>
      <ul>
        <li>© L D</li>
        <li>[email protected]</li>
      </ul>
    </footer>
  </body>
</html>

CSS:

    p {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  width: 600px;
  
}


@media only screen and (max-width: 480px) {
  header ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    margin: 0;
    padding: 0;
  }

  @media only screen and (max-width: 480px) {
    body {
      display: flex;
      flex-direction: column;
      text-align: center;
    }
  }
 

@media only screen and (max-width: 480px) {
    footer ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      margin: 0;
      padding: 0;
    }
  }
}

Привет, добро пожаловать в SO. Ваш первый пост был не так уж и плох. Я просто отредактировал заголовок и вставил скриншоты, см. stackoverflow.com/posts/71534501/revisions

— 19.03.2022 01:40

Вам не нужно повторять @media only screen and (max-width: 480px) три раза. Поделитесь, пожалуйста, своим HTML-кодом!

— 19.03.2022 01:44

html css responsive

19.03.2022 01:35

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы определили ширину абзаца без медиа-запроса.

p {
  /* ... */
  width: 600px;
}

Каждый абзац будет иметь ширину 600 пикселей даже на мобильных устройствах.

Вам нужно установить медиа-запрос, чтобы ограничить ширину только для рабочего стола, или использовать «лучшее» правило.

p {
  /* ... */
  max-width: 600px;
}

При этом ваш текст никогда не будет больше 600 пикселей, но на мобильных устройствах он будет меньше.

19.03.2022 02:47

Ответ принят как подходящий

Вы можете попробовать этот способ

p {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  max-width: 600px;
  text-align:center;
  width:100%;
  height:auto;
  margin:0 auto;
  
}

main { 
text-align:center
}

img {
  max-width:600px;
  width:100%;
  height:auto;
  margin:0 auto;
 }
 
@media only screen and (max-width: 480px) {
  header ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    margin: 0;
    padding: 0;
  }

p {
font-size:16px;
}

    footer ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      margin: 0;
      padding: 0;
    }
  }

<main>
      <h1>25/02/22 A day on the Pier</h1>
      <img src = "https://st2.depositphotos.com/3791047/5689/i/600/depositphotos_56899783-stock-photo-girls-sitting-on-the-bench.jpg" alt = "pier" />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      </p>
      
      <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
    </main>

19.03.2022 03:05

Другие вопросы по теме

Uncaught ReferenceError: useStudent не определен

Использование jinja2 между кавычками/настройка встроенных стилей с помощью jinja2

Невозможно отобразить svg в пользовательском интерфейсе материалов

Панель навигации CSS (ссылка)

Как я могу выбрать один из двух размеров изображения, используя функции CSS, а не медиа-запросы?

Как использовать `display: content` для наведения?

Как добавить тень для ввода и пользовательскую иконку с помощью css

Как добавить несколько значков в массив

Настроить css для блоков ввода/вывода в xaringan

Кнопка btn1_click не работает

Абзац остается слишком большим для просмотра на мобильных устройствах (отзывчивый дизайн)

Ответы 2

Другие вопросы по теме

Похожие вопросы