Why aren't my flexbox items appearing on next line when screen is resized

Question

I have set flexbox with my ul consisting of 3 li items and they are working perfectly. When the user reaches a screen size below 600px, I want all my li items to appear on new line. This isn't working! They still continue to show on the same line? What went wrong?

Here is my html:-

<ul>
        <li><h1>My Photography Works</h1></li>
        <li><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero nisi neque accusamus cum quibusdam rerum error nulla quidem et distinctio illum est, praesentium incidunt doloremque ducimus molestias quod explicabo aliquam!</p></li>
        <li><h3>Contact Me Now</h3></li>
    </ul>

    <ul>
            <li><h1>Published Papers</h1></li>
            <li><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero nisi neque accusamus cum quibusdam rerum error nulla quidem et distinctio illum est, praesentium incidunt doloremque ducimus molestias quod explicabo aliquam!</p></li>
            <li><h3>Browse them now</h3></li>
    </ul>

Here is my style.scss

ul{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: space-between;

    li{
        margin-bottom: 10px;
    }

    @media screen and (max-width: 600px) {
        flex: 100%;
      }

    li:nth-child(1){
        font-family: Arial, Helvetica, sans-serif;
        flex: 20%;

    }

    li:nth-child(2){
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-size: 18px;
        flex: 50%;
    }

    li:nth-child(3){
        font-family: Arial, Helvetica, sans-serif;
        flex: 10%;
    }
}

Bottom line: you need to pay attention to specificity. Your code is fine but your `li:nth-child()` are overriding the style defined in the media query — Temani Afif, Nov 07 '19 at 19:24

Ori Drori · Accepted Answer · 2019-11-07T18:28:57.090

Change flex-direction to column:

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: space-between;
}

li {
  margin-bottom: 10px;
}

@media screen and (max-width: 600px) {
  ul {
    flex-direction: column;
  }
}

li:nth-child(1) {
  font-family: Arial, Helvetica, sans-serif;
  flex: 20%;
}

li:nth-child(2) {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 18px;
  flex: 50%;
}

li:nth-child(3) {
  font-family: Arial, Helvetica, sans-serif;
  flex: 10%;
}

Here is my html:-

<ul>
  <li>
    <h1>My Photography Works</h1>
  </li>
  <li>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero nisi neque accusamus cum quibusdam rerum error nulla quidem et distinctio illum est, praesentium incidunt doloremque ducimus molestias quod explicabo aliquam!</p>
  </li>
  <li>
    <h3>Contact Me Now</h3>
  </li>
</ul>

<ul>
  <li>
    <h1>Published Papers</h1>
  </li>
  <li>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero nisi neque accusamus cum quibusdam rerum error nulla quidem et distinctio illum est, praesentium incidunt doloremque ducimus molestias quod explicabo aliquam!</p>
  </li>
  <li>
    <h3>Browse them now</h3>
  </li>
</ul>

The flex wrap doesn't work because changing the list items flex to 100% doesn't work because li:nth-child(*) is a more specific selector. You can override it with a more specific selector in the media query:

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: space-between;
}

li {
  margin-bottom: 10px;
}



li:nth-child(1) {
  font-family: Arial, Helvetica, sans-serif;
  flex: 20%;
}

li:nth-child(2) {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 18px;
  flex: 50%;
}

li:nth-child(3) {
  font-family: Arial, Helvetica, sans-serif;
  flex: 10%;
}

@media screen and (max-width: 600px) {
  ul li:nth-child(1), ul li:nth-child(2), ul li:nth-child(3) {
    flex: 100%;
  }
}

Here is my html:-

<ul>
  <li>
    <h1>My Photography Works</h1>
  </li>
  <li>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero nisi neque accusamus cum quibusdam rerum error nulla quidem et distinctio illum est, praesentium incidunt doloremque ducimus molestias quod explicabo aliquam!</p>
  </li>
  <li>
    <h3>Contact Me Now</h3>
  </li>
</ul>

<ul>
  <li>
    <h1>Published Papers</h1>
  </li>
  <li>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero nisi neque accusamus cum quibusdam rerum error nulla quidem et distinctio illum est, praesentium incidunt doloremque ducimus molestias quod explicabo aliquam!</p>
  </li>
  <li>
    <h3>Browse them now</h3>
  </li>
</ul>

Why aren't my flexbox items appearing on next line when screen is resized

1 Answers1