Адаптивный HTML / CSS для отправки текста ниже формы

Question

Я работаю над созданием адаптивной страницы входа в систему. У меня есть раздел текста в таблице, чтобы предоставить пользователям быструю информацию до того, как они войдут в систему. Проблема в том, что когда размер экрана / окна уменьшается, форма входа перекрывает / закрывает текст. Я хотел бы, чтобы текст уменьшался ниже формы входа в систему при уменьшении экрана, но я не совсем уверен, как это сделать. Мне удалось получить изображение логотипа вверху и меню ссылок, чтобы реагировать на изменения размера с помощью свойств CSS «max-width», но я не могу понять, как что-то переместить в другую часть страницы. HTML / CSS, с которым я работаю, вставлен ниже, и я приложил скриншот с моего телефона, показывающий проблему наложения. Я знаю, что HTML / CSS не идеален, но мне приходится делать это в очень ограниченном редакторе. Любая помощь очень ценится.

<p><img src="https://www.westga.edu/uwgonline/assets-uwgonline/pics/CourseDen.png" style="z-index: -1; margin: 0% 1.5%; max-width: 1100px; width: 90%; position: absolute; height: auto;" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table style="z-index: -1; opacity: 0.85; max-width: 100%; width: 50%; left: 35%; top: 380px; position: absolute;">
    <tbody>
        <tr>
            <td style="padding: 20px; background: #FFFFFF;">
                <p>
                    <span style="color: #000000;">
                    <span style="color: #000000;">
                        <em>Please note your password is the same as your <strong>UWG ID</strong> and is case sensitive.</em>
                    </span>
                    </span>
                </p>
                <strong><span style="color: #000000;">UWG Online Help Desk</span></strong>
                <br />
                <span style="color: #000000;">(M-F 8a-5p ET) 678-839-6248 or 1-855-933-8946</span>
                <br /><a href="mailto:online@westga.edu">online@westga.edu</a> &bull; <a rel="noopener noreferrer" href="http://uwgonline.westga.edu/uwgonline/chat-with-us.php" target="_blank">Chat</a>
                <p><strong><span style="color: #000000;">24/7/365 D2L Help Center</span></strong>
                    <br /><span style="color: #000000;">Knowledge Base &amp; Live Support</span>
                    <br /><a rel="noopener noreferrer" href="https://D2Lhelp.view.usg.edu" target="_blank">https://D2Lhelp.view.usg.edu</a></p>
            </td>
        </tr>
    </tbody>
</table>
<hr />
<table style="max-width: 100%; width: 99%; text-align: center; border: none; border-collapse: collapse;">
    <tbody>
        <tr>
            <td style="width: 20%;"><a href="https://uwgonline.westga.edu/uwg-online-contact-us.php" target="blank" style="color: #777777;">Help</a></td>
            <td style="width: 20%; border-left: 1px solid #D3D3D3;"><a href="https://uwgonline.westga.edu/uwg-online-student-help.php" target="blank" style="color: #777777;"> Resources </a></td>
            <td style="width: 20%; border-left: 1px solid #D3D3D3;"><a href="http://uwgonline.westga.edu/" target="blank" style="color: #777777;"> More Info</a></td>
            <td style="width: 20%; border-left: 1px solid #D3D3D3;"><a href="https://westga.view.usg.edu/d2l/systemCheck" target="blank" style="color: #777777;"> System Checker</a></td>
            <td style="width: 20%; border-left: 1px solid #D3D3D3;"><a href="https://go.view.usg.edu/" target="blank" style="color: #777777;"> eCampus, WebMBA, &amp; EU</a></td>
        </tr>
    </tbody>
</table>
<hr />

Answer 1

Ответ на мою проблему состоял в том, чтобы взять текст, который застревает за окном входа в систему, и удалить его position: absolute. Это поместит поле для входа под ним. Что мы действительно хотели, так это поле для входа слева от текста и перемещалось вниз под ним только тогда, когда размер экрана / окна был ниже определенного размера, но, поскольку я не могу редактировать поле входа, это решение, которое мы решили использовать быть лучшим за то, что у нас был доступ для редактирования. Что вы @Sirence за упоминание position: absolute информации в вашем комментарии!