Отзывчивый список django. Неправильное выравнивание на телефонном устройстве

Я создаю сайт "Семейное дерево", используя django, но у меня есть проблема.

Это мой список, когда я пользуюсь компьютером computer list если я пользуюсь мобильным телефоном, у меня есть вот это
mobile list

Я использую библиотеку django-mptt для построения этого списка:

<ul class="root">
{% recursetree GT %}
    <br><li>
        <details open class="detail"> 
        <summary><a href="{% url 'person-detail' node.id %}?id={{node.id}}">{{ node.name }} </a><span><sup>{% if node.date_birthday|date:'d.m' == '01.01' %} ({{node.date_birthday|date:'Y'}} - {{node.date_death|date:'Y'}} г.г) {% else %}({{node.date_birthday|date:'d.m.Y'}} - {{node.date_death|date:'d.m.Y'}} г.г){% endif %}</sup></span></summary>
        {% if not node.is_leaf_node %}
            <ul class="children">
                <a href="#">{{ children }}</a
            </ul>
        {% endif %}
    </details>
    </li>
{% endrecursetree %}

Как сделать отзывчивый список с помощью CSS или JS, чтобы он правильно отображался на телефоне?

Вернуться на верх