Unordered list items in one line with bullets

Question

I am building a responsive page that has an unordered list. My requirements are that the li items display in one line with bullets in bigger screen resolution:

And break down to one bullet point per line when shrunk down:

So far, I have been to get all three lines in one without bullets and 3 lines without bullets. When I get bullets for smaller screen size I do not get in one line for bigger screen. I am not sure where I am going wrong. I am guessing I am missing something in list-style-type setting.

HTML

<div>

<ul class="list">
    <li>Text of line 1 Text of line 1 Text of line 1 Text of line 1 Text of line 1 </li>
    <li>Text of line 2 Text of line 2 Text of line 1 Text of line 2 Text of line 2  </li>
    <li>Text of line 3 Text of line 3 Text of line 1 Text of line 3 Text of line 3 </li>
</ul>

</div>

CSS

.list li {
  display: inline;
  list-style: none;
}

@media screen and (max-width: 600px) {
  .list{
     display: block;
     list-style: circle;
  }
}

Fiddle link: http://jsfiddle.net/ug5k3k15/

Answer 1

First of all note that you should use .list li selector in the @media rule to target the list items.

Besides - as I mentioned in my comment - since you are changing the type of display of the li elements to inline or block, list-item will no linger affect the element:

12.5.1 Lists: the 'list-style-type', 'list-style',... properties

list-style Applies to: elements with display: list-item

One option is to use CSS float instead, as follows:

EXAMPLE HERE (Check the demo for more details including the clearfix)

.list li {
    float: left;
    list-style-position: inside;
    list-style-type: disc;
    margin-right: 1em;
}

@media screen and (max-width: 600px) {
    .list li {
        float: none;
        list-style-position: outside;
        margin: 0;
    }
}