MyWetSocks MyWetSocks - 7 months ago 9
HTML Question

Inline List on multiple lines depending on the screen size

I have an inline list and I'd like it to be split into two distinct lines when the screen becomes too small to accommodate the text (I can define media queries to do so because content is always the same size). Any idea how to make such thing happen ?

Here is what I currently have but when resizing it just shrinks on itself:



.tabs {
margin: 0;
padding: 0;
list-style: none;
display: table;
table-layout: fixed;
width: 100%;
text-align: center;
}
.tabs__item {
display: table-cell;
border: 1px solid red;
border-left-width: 0;
}
.tabs__item:first-child {
border-left: 1px solid red;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.tabs__item:last-child {
border-right: 1px solid red;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}

<ul class="tabs">
<li class="tabs__item">Hello</li>
<li class="tabs__item">Hello</li>
<li class="tabs__item">Hello</li>
<li class="tabs__item">Hello</li>
<li class="tabs__item">Hello</li>
<li class="tabs__item">Hello</li>
<li class="tabs__item">Hello</li>
<li class="tabs__item">Hello</li>
<li class="tabs__item">Hello</li>
<li class="tabs__item">Hello</li>
<li class="tabs__item">Hello</li>
<li class="tabs__item">Hello</li>
<li class="tabs__item">Hello</li>
<li class="tabs__item">Hello</li>
</ul>





Thanks in advance.

Answer

Hope i helped. This code should do the trick.

.tabs, .tabs2 {
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
  display: table;
  table-layout: fixed;
  width: 50%;
  text-align: center;
}

.tabs__item, .tabs__item2 {
  display: table-cell;
  border: 1px solid red;
  border-left-width: 0;
}
.tabs__item:first-child {
  border-left: 1px solid red;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.tabs__item2:last-child {
  border-right: 1px solid red;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

@media (max-width:768px) {
  .tabs, .tabs2 {
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
  display: table;
  table-layout: fixed;
  width: 100%;
  text-align: center;
  clear:both;
}
  .tabs__item:first-child, .tabs__item2:first-child {
  border-left: 1px solid red;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.tabs__item:last-child, .tabs__item2:last-child {
  border-right: 1px solid red;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
}
<ul class="tabs">
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
  <li class="tabs__item">Hello</li>
</ul>
<ul class="tabs2">
  <li class="tabs__item2">Hello</li>
  <li class="tabs__item2">Hello</li>
  <li class="tabs__item2">Hello</li>
  <li class="tabs__item2">Hello</li>
  <li class="tabs__item2">Hello</li>
  <li class="tabs__item2">Hello</li>
  <li class="tabs__item2">Hello</li>
</ul>