Что изменить, чтобы это сжалось?

Question

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

https://imgur.com/VjZaUEZ
Если вы посмотрите на эту картинку, вы увидите ту часть сайта, которую я сделал. Я хочу, чтобы он реагировал так, чтобы текст в левой части изображения (пояснение о процессоре) уменьшался при уменьшении размера браузера.

Однако это происходит: https://imgur.com/LBaHlOu
Я хочу, чтобы этот текст под картинкой был рядом с ним и уменьшался. После нескольких часов работы с дисплеями: и margin: etc, я решил спросить вас, ребята.

Вот мои коды (я знаю, что коды не самые лучшие):

CSS : https://imgur.com/UOThxjv

HTML : https://imgur.com/DAhC6dx

если вам нужны какие-либо разъяснения, пожалуйста, спросите меня.

Answer 1

Вам нужно установить div для динамической ширины h4 примерно на 60%. Сделайте div контейнер для img и установите его ширину 40%. Вы должны использовать парафры вместо заголовка-4 для текста.

Изменить HTML:

<div class="text">
  <p>your text</p>
</div>
<div class="img-div"><img src="pc.png" alt="pc.png" /></div>

CSS:

.text {
  width: 60%;
  float: left;
}

.img-div {
  float: right;
  width: 40%;
}

.img-div img {
  width: 100%;
  height: 100%;
}

Адаптивное изображение карты

Чтобы сделать карту изображений отзывчивой, вам нужно использовать js-скрипт для управления координатами при изменении размера окна или использовать изображения .SVG для карты изображений:

• Проверьте этот вопрос SO .
• JS скрипт изменения размера карты изображений

Answer 2

Все размеры и поля в вашем CSS-коде имеют постоянную длину в пикселях.

Вместо этого вы должны сделать их в процентах от размера окна. Например, вы можете сделать ширину тега div или изображения всегда равной 20% размера экрана, поместив эту строку CSS в класс CSS, как показано ниже:

width: 20%;