title: Responsive List django. Broken alignment on phone device
body: <p>I'm building a &quot;Family Tree&quot; website using django but I have a problem.</p>
  <p>This is my list when i use computer
  <img src="https://i.stack.imgur.com/EzaYY.png" alt="computer list" />
  if I use my mobile phone i have this<br />
  <img src="https://i.stack.imgur.com/Nmhhs.png" alt="mobile list" /></p>
  <p>I use library django-mptt to build this list:</p>
  <pre><code>&lt;ul class=&quot;root&quot;&gt;
  {% recursetree GT %}
      &lt;br&gt;&lt;li&gt;
          &lt;details open class=&quot;detail&quot;&gt; 
          &lt;summary&gt;&lt;a href=&quot;{% url 'person-detail' node.id %}?id={{node.id}}&quot;&gt;{{ node.name }} &lt;/a&gt;&lt;span&gt;&lt;sup&gt;{% 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 %}&lt;/sup&gt;&lt;/span&gt;&lt;/summary&gt;
          {% if not node.is_leaf_node %}
              &lt;ul class=&quot;children&quot;&gt;
                  &lt;a href=&quot;#&quot;&gt;{{ children }}&lt;/a
              &lt;/ul&gt;
          {% endif %}
      &lt;/details&gt;
      &lt;/li&gt;
  {% endrecursetree %}
  </code></pre>
  
  <p>my css look like:</p>
  <pre><code>.root li a{
  text-decoration: none;
  position: relative;
  font-family: 'Montserrat', sans-serif;
  color: #524f4e;
  } 
  .root li a::before{
  content: '';
  bottom: 0;
  right: 0;
  position: absolute;
  width: 0%;
  height: 2px;
  background-color: #2D764A;
  transition: 0.3s;
  }
  .root li a:hover:before {
  width: 100%;
  left: 0;
  }
  .root li{
  list-style-type:none;
  color:  green;
  }
  
  .root li span{
  color: black;
  }
  .Maingenwrite{
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  }
  
  
  
  
  .detail summary{
  position: absolute;
  
  }
  </code></pre>
  <p>How can I make a responsive list using CSS or JS so that it displays correctly on the phone ?</p>