Переполнение CSS при изменении размера

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

Проблема: Это стандартный вид карты

Вот так выглядит карта при изменении размера:

Как я могу предотвратить это? или хотя бы сделать их красивыми?

HTML:

 <body>
    <div class = "container">
      <div class = "card">
        <span class = "circle">
          <svg width = "17" height = "16" xmlns = "http://www.w3.org/2000/svg">
            <path
              d = "m9.067.43 1.99 4.031c.112.228.33.386.58.422l4.45.647a.772.772 0 0 1 .427 1.316l-3.22 3.138a.773.773 0 0 0-.222.683l.76 4.431a.772.772 0 0 1-1.12.813l-3.98-2.092a.773.773 0 0 0-.718 0l-3.98 2.092a.772.772 0 0 1-1.119-.813l.76-4.431a.77.77 0 0 0-.222-.683L.233 6.846A.772.772 0 0 1 .661 5.53l4.449-.647a.772.772 0 0 0 .58-.422L7.68.43a.774.774 0 0 1 1.387 0Z"
              fill = "#FC7614"
            />
          </svg>
        </span>
        <h2>How did we do?</h2>
        <p>
          Please let us know how we did with your suppoer request. All feedback
          is appreciated to help us improve our offering!
        </p>
        <div class = "rating">
          <span class = "circle">1</span>
          <span class = "circle">2</span>
          <span class = "circle">3</span>
          <span class = "circle">4</span>
          <span class = "circle">5</span>
        </div>
        <button class = "btn">SUBMIT</button>
      </div>
    </div>
  </body>

CSS:

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],500;9..144,600&family=Overpass:wght@400;700&display=swap");

:root {
  --mobile-width: 375px;
  --desktop-width: 1440px;
  --btn-hover: hsl(0, 0%, 100%);
  --rating-hover: hsl(217, 12%, 63%);
  --body-background: #121417;
  --card-background: #252d37;
  --p-font-size: 15px;
  --p-color: hsl(216, 12%, 54%);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: "Overpass", sans-serif;
  font-size: 15px;
}

.container {
  width: 100%;
  height: 100%;
  background-color: var(--body-background);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* overflow: scroll; */
}

.card {
  width: 20rem;
  background-color: var(--card-background);
  padding: 20px;
  border-radius: 15px;
  max-width: calc(100% - 2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.card > * {
  margin-bottom: 1rem;
}

.card h2 {
  color: var(--btn-hover);
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 700;
}

.card p {
  color: var(--p-color);
  font-size: 15px;
  font-weight: 100 !important;
}

.card .rating {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.card .circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #30363f;
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  border-radius: 50%;
  color: var(--p-color);
}

Вы слышали о @media? Если не взгляните на это или это.

— 30.01.2023 09:48

Протестировал ваш код с помощью простого html и css. И когда ставишь очень узкий размер экрана, как на твоем скриншоте, он не выглядит как на твоем скриншоте в моем браузере. Вся коробка становится меньше.

— 30.01.2023 09:48

@Geshode Да, сэр. Я в курсе @media. Но я не знаю, что мне с этим делать.

— 30.01.2023 09:51

@ Peter206 Peter206 Сэр, я забыл упомянуть, но я использую браузер Microsoft Edge. Возможно, это влияет на результаты.

— 30.01.2023 09:52

если пользовательское устройство не нацелено, я думаю, что нет необходимости поддерживать ширину 88 пикселей. Даже экран Apple Watch больше.

— 30.01.2023 09:53

@AhmetRemziEKMEKCI Итак, сэр, вы говорите мне, что это нормально?

— 30.01.2023 09:56

Да я думаю в вашем случае это нормально.

— 30.01.2023 10:01

Что касается идеальной отзывчивости, я бы посоветовал лучше изучить свойство flex-wrap: wrap, чтобы кнопки сворачивались и не растягивались по размеру или не переполняли контейнер. Это правда, что вам не нужно заботиться о экране с несколькими пикселями ... но все же вы должны обращаться к диапазонам ... и, возможно, рассмотреть другой стиль с учетом контрольной точки (вот где в игру вступают запросы @media

— 30.01.2023 10:02

html css flexbox

30.01.2023 09:40

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

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

Ответы 1

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

Прежде всего, какое ваше устройство имеет ширину области просмотра 88 пикселей? Это не мало, это очень крошечный. Даже умные часы больше этого.

После анализа вашего кода, чтобы он поместился на таком крошечном экране, вам нужно адаптировать все разделы, которые переполняются:

ваша нумерация страниц/рейтингов нуждается в flex-wrap: wrap;
И текст карты должен быть разбит, чтобы вы могли использовать word-break: break-all; или hyphens: auto;

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],500;9..144,600&family=Overpass:wght@400;700&display=swap");

:root {
  --mobile-width: 375px;
  --desktop-width: 1440px;
  --btn-hover: hsl(0, 0%, 100%);
  --rating-hover: hsl(217, 12%, 63%);
  --body-background: #121417;
  --card-background: #252d37;
  --p-font-size: 15px;
  --p-color: hsl(216, 12%, 54%);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: "Overpass", sans-serif;
  font-size: 15px;
}

.container {
  width: 100%;
  height: 100%;
  background-color: var(--body-background);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* overflow: scroll; */
}

.card {
  width: 20rem;
  background-color: var(--card-background);
  padding: 20px;
  border-radius: 15px;
  max-width: calc(100% - 2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.card > * {
  margin-bottom: 1rem;
}

.card h2 {
  color: var(--btn-hover);
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 700;
}

.card p {
  color: var(--p-color);
  font-size: 15px;
  font-weight: 100 !important;

  /* ADDED HERE */
  hyphens: auto;
}

.card .rating {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  
  /* ADDED HERE*/
  flex-wrap: wrap;
}

.card .circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #30363f;
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  border-radius: 50%;
  color: var(--p-color);
}

 <body>
    <div class = "container">
      <div class = "card">
        <span class = "circle">
          <svg width = "17" height = "16" xmlns = "http://www.w3.org/2000/svg">
            <path
              d = "m9.067.43 1.99 4.031c.112.228.33.386.58.422l4.45.647a.772.772 0 0 1 .427 1.316l-3.22 3.138a.773.773 0 0 0-.222.683l.76 4.431a.772.772 0 0 1-1.12.813l-3.98-2.092a.773.773 0 0 0-.718 0l-3.98 2.092a.772.772 0 0 1-1.119-.813l.76-4.431a.77.77 0 0 0-.222-.683L.233 6.846A.772.772 0 0 1 .661 5.53l4.449-.647a.772.772 0 0 0 .58-.422L7.68.43a.774.774 0 0 1 1.387 0Z"
              fill = "#FC7614"
            />
          </svg>
        </span>
        <h2>How did we do?</h2>
        <p>
          Please let us know how we did with your suppoer request. All feedback
          is appreciated to help us improve our offering!
        </p>
        <div class = "rating">
          <span class = "circle">1</span>
          <span class = "circle">2</span>
          <span class = "circle">3</span>
          <span class = "circle">4</span>
          <span class = "circle">5</span>
        </div>
        <button class = "btn">SUBMIT</button>
      </div>
    </div>
  </body>

30.01.2023 10:01

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

Как изменить цвет значка программно

Не удается передать props.style компоненту "@emotion/styled"

Слово с другим форматом должно оставаться встроенным

Как использовать CSS?

Выравнивание двух кнопок в разных формах в одной строке

Как загрузить изображение из JavaScript

Как установить состояния в ответ, прежде чем снова использовать его?

Исправление порядка z-индекса для фонового изображения с темным фильтром в качестве содержимого и модальным потоком из попутного ветра css

Угол наклона CSS выравнивается по 3 рядам

Обводка текста проходит сама по себе при использовании Tailwind CSS

Переполнение CSS при изменении размера

Ответы 1

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

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