Адаптация сайта для телефоного режима

Question

Не получается нормально адаптировать под телефон одну вкладку из сайта. Сайт пишу для курсовой на HTML и CSS, чуть js. Короче при переходе в режим телефона я убрал видимость картинок и оставил только текст, думал поможет и он не будет вылезать за рамки. Но нет, вот такая фигня

html,
body {
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  line-height: 1.6;
}

strong {
  font-weight: 700;
}

.otstup2 {
  margin-bottom: 1em;
  margin-top: 1em;
  width: 100%;
  background-color: #F7F7F7;
}

.otstup3 {
  margin-bottom: 3em;
  margin-top: 3em;
  width: 65%;
}

table {
  width: 85%;
  height: auto;
  margin: auto;
  margin-bottom: 0px;
  margin-top: 0px;
  border-collapse: collapse;

}

tr {
  display: table-row;
  vertical-align: inherit;
  unicode-bidi: isolate;
  border-color: inherit;
}

th {
  width: auto;
  vertical-align: top;
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
  unicode-bidi: isolate;
}

td {
  padding: 0em 3.5em 0em 2.5em;
  width: 50%;
  display: table-cell;
  vertical-align: inherit;
  unicode-bidi: isolate;

}

.codeh3 {
  margin-top: 0.0em;
  text-align: center;
}

h3 {
  font-weight: 500;
  font-size: 1.44em;
  margin: 1.514em 0 0em 0;
  line-height: 1.2;
}

strong {
  font-weight: 700;
}

p {
  color: black;
  margin-bottom: 0em;
  font-weight: 300;
  line-height: 1.5;
  margin-top: 1.2em;
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: isolate;
  font-size: 1.25em;
}

@media only screen and (max-width: 500px) {
  .otstup3 {
    width: 100px;
  }

  h3 {
    font-size: 1.25em;
    /* Уменьшаем размер заголовка */
  }

  th {
    display: none;
  }

  /* Обеспечиваем оборачивание текста в <td> */
  td {
    width: 100%;
    /* Ячейка занимает всю ширину */
    padding: 0.5em;
    /* Уменьшенные отступы для экономии пространства */
    word-break: break-all;

  }

  p {
    font-size: 1em;
    /* Уменьшенный размер шрифта для улучшенной читабельности */
    white-space: normal;
    /* Нормальное оборачивание текста */
    word-wrap: break-word;
    /* Перенос длинных слов */
    overflow-wrap: break-word;
    /* Современный аналог для некоторых браузеров */
  }
}

<table class="otstup3">
  <tbody>
    <tr>
      <td>
        <table class="otstup2" style="height: 150px;">
          <tbody>
            <tr>
              <th>
                <img src="img/MyCollages (1).jpg" width="613.13" height="613.13" alt="">
              </th>
              <td>
                <h3 class="codeh3" style="width: 480px; font-size: xx-large; color: #000080; height: 39px;">
                  <strong>Ручной инструмент</strong>
                </h3>
                <p>Кисти, валики, шнуры разметочные, маркера, шпателя, ковши и кельмы, тёрки и гладилки, правила трапеция и с уровнем, миксера для красок и смесей, ленты малярные, спецленты, рулетки, угольники, уровни строительные, ножи и лезвия, инструмент для плитки, СВП, пистолеты для пены и силикона, степлера и скобы, заклёпочники и заклёпки, газовые горелки и паяльники, ножовки, молотки, топоры, стамески, тиски, отвёртки и биты, наборы отвёрток, плоскогубцы и бокорезы, ножницы по металлу и ПВХ, ключи разводные и переставные, наборы рожково-накидных и шестигранных ключей, наборы инструмента, автоинструмент, сумки , ящики и органайзеры </p>
              </td>
            </tr>
          </tbody>
        </table>
</table>

Answer 1

Просто поменяй наименование своего заголовка @media в css на:

@media screen and (min-width: 500px) {

Если в дальнейшем будет что-то не понятно, то почитай больше о @media-запросах.

Answer 2

Судя по той информации, которую предоставили, бессмысленно в вашем случае использовать <table> для верстки. Тем более создавать таблицы внутри таблиц.

<table> - используется исключительно для создания таблиц.

Для создания сеток необходимо использовать display: grid; или display: flex;.

Так же в вашем CSS было много ненужных или конфликтующих стилей, в сухом остатке получился этот шаблон:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  color: #333;
}

.otstup2 {
    padding: 0em 3.5em 0em 2.5em;
}
.otstup3 {
    display: grid;
    background-color: #F7F7F7;
    grid-template-columns: repeat(2, 1fr);
    margin: 3em;
    gap: 10px;
}
.codeh3 {
    font-size: xx-large; 
    color: #000080; 
    text-align: center;
}

h3 {
  margin: 1.514em 0 0 0;
  line-height: 1.2;
}

p {
  line-height: 1.5;
  font-size: 1.25em;
}

@media (max-width: 500px) {
    .otstup3 {
        grid-template-columns: 1fr;
    }
}

<div>
    <div class="otstup3">
        <div>
            <img src="img/MyCollages (1).jpg" width="100%" height="auto" alt="">
        </div>
        <div class="otstup2">
            <h3 class="codeh3">
                <strong>Ручной инструмент</strong>
            </h3>
            <p>Кисти, валики, шнуры разметочные, маркера, шпателя, ковши и кельмы, тёрки и гладилки,
                правила трапеция и с уровнем, миксера для красок и смесей, ленты малярные,
                спецленты, рулетки, угольники, уровни строительные, ножи и лезвия, инструмент для
                плитки, СВП, пистолеты для пены и силикона, степлера и скобы, заклёпочники и
                заклёпки, газовые горелки и паяльники, ножовки, молотки, топоры, стамески, тиски,
                отвёртки и биты, наборы отвёрток, плоскогубцы и бокорезы, ножницы по металлу и ПВХ,
                ключи разводные и переставные, наборы рожково-накидных и шестигранных ключей, наборы
                инструмента, автоинструмент, сумки , ящики и органайзеры </p>
        </div>
    </div>
    <!-- другие блоки otstup3 -->
</div>

БЛОГ НА HUSL

Адаптация сайта для телефоного режима

Ответы (2 шт):