Using rows with a list, one row longer than the other

1

I am working on my tribute page, and it is almost finished. However, there is one problem I can’t seem to solve. I have a long list of books. Because I think it is too long to just display in one row I have added a second row next to it. This looks pretty good on a computer.

However, when I downsize the screen the right row gets longer than the other, because most of the longer names are in the right row and on smaller screens they use more than 1 line.

Is there any way I can solve this? Thanks in advance!

2

You could make the second list move underneath the first, so you just have the one. Maybe with float: or media queries.

3

Ok just messed a round with it a little. Your div’s seem all over the place needs tidying. You can add:



  

This will create one longer list when the screen gets smaller.
4

This looks better:


<div class="achtergrond" style="font-family:'Courier New', monospace">
  <div class=text-center "container-fluid">
    <h1>Terry Pratchett</h1>
    <div class="vakje foto">
      <div class="onderfoto">
        <img class=img-responsive src="https://upload.wikimedia.org/wikipedia/commons/7/74/Sir_Terry_Pratchett.JPG" alt="Photo of Terry Pratchett">
      </div>
      <p><b>Terry Pratchett </b><small>June 2012</small></p>
    </div>
  </div>
  <div class="tekst">
    <p><b>The diskworld books Terry Pratchett has written:</b></p>
    <div class="row">
      <div class="col-sm-6 col-xs-12">
        <ul>
          <li>The Colour of Magic (1983)</li>
          <li>The Light Fantastic (1986)</li>
          <li>Equal Rites (1987)</li>
          <li>Mort (1987)</li>
          <li>Sourcery (1988)</li>
          <li>Wyrd Sisters (1988)</li>
          <li>Pyramids (1989)</li>
          <li>Guards! Guards! (1989)</li>
          <li>Faust Eric (1990)</li>
          <li>Moving Pictures (1990)</li>
          <li>Reaper Man (1991)</li>
          <li>Witches Abroad (1991)</li>
          <li>Small Gods (1992)</li>
          <li>Lords and Ladies (1992)</li>
          <li>Troll Bridge (1992)</li>
          <li>Men at Arms (1993)</li>
          <li>Theatre of Cruelty (1993)</li>
          <li>Soul Music (1994)</li>
          <li>Interesting Times (1994)</li>
          <li>Maskerade (1995)</li>
          <li>Feet of Clay (1996)</li>
          <li>Hogfather (1996)</li>
          <li>Jingo (1997)</li>
        </ul>
      </div>
      <div class="col-sm-6 col-xs-12">
        <ul>
          <li>The Last Continent (1998)</li>
          <li>Carpe Jugulum (1998)</li>
          <li>The Sea and Little Fishes (1998)</li>
          <li>The Fifth Elephant (1999)</li>
          <li>The Truth (2000)</li>
          <li>Thief of Time (2001)</li>
          <li>The Last Hero (2001)</li>
          <li>The Amazing Maurice And His Educated Rodents (2001)</li>
          <li>Night Watch (2002)</li>
          <li>Death and What Comes Next (2002)</li>
          <li>The Wee Free Men (2003)</li>
          <li>Monstrous Regiment (2003)</li>
          <li>A Hat Full of Sky (2004)</li>
          <li>Going Postal (2004)</li>
          <li>Once More* With Footnotes (2004)</li>
          <li>Thud! (2005)</li>
          <li>Wintersmith (2006)</li>
          <li>Making Money (2007)</li>
          <li>Unseen Academicals (2009)</li>
          <li>I Shall Wear Midnight (2010)</li>
          <li>Snuff (2011)</li>
          <li>Raising Steam (2013)</li>
          <li>The Shepherd's Crown (2015)</li>
        </ul>
      </div>
    </div>
    <br/>
    <p><b>Some amazing quotes:</b></p>
    <p><em>"Give a man a fire and he's warm for a day, but set fire to him and he's warm for the rest of his life."</em></p>
    <p><em>"It is said that your life flashes before your eyes just before you die. That is true, it's called Life."</em></p>
    <p><em>"In the beginning there was nothing, which exploded."</em></p>
    <p><em>"Light thinks it travels faster than anything but it is wrong. No matter how fast light travels, it finds the darkness has always got there first, and is waiting for it."</em></p>
    <p><em>"It's not worth doing something unless someone, somewhere, would much rather you weren't doing it."</em></p><br/>

    <h3>For more information about Terry Prachett please visit his <a href="https://en.wikipedia.org/wiki/Terry_Pratchett" target="_blank">Wikipedia page</a> or his <a href="https://www.terrypratchettbooks.com/sir-terry/" target="_blank">website</a>.</h3>
  </div>
</div>
5

Thanks a lot, I’m going to work with it :slight_smile: