[SOLVED] Trying to Create Columns HTML CSS

Trying to Create Columns HTML CSS

I have a list that I created which contains class names. Currently, when you load the page, you see them all, but vertically.

What I want to do is make it so that the column size is different for each browser size. I tried to do this with column-count, but I don't see 3 columns, they are still all vertical.

For example 900px- 1280px: Display in 3 colums 700px-900px: Display in 2 colums Below 700px: Vertical like it is now

Picture of 3 colums: enter image description here

div h1{
    font-size: 2em;
}

li[data-offered-fall=yes]::before {
            font-family: FontAwesome;
            font-size: 0.75em;
            content: "\2705";
            display: inline-block;
            padding-left: 0.25em;
            color:red;
}

li[data-offered-fall=yes]::after {
            font-family: FontAwesome;
            font-size: 0.75em;
            content: li;
            display: inline-block;
            padding-left: 0.25em;
            color:red;
}

@media screen and (max-width: 1280px)
{
    li{
        column-count: 3;
    }
}

@media screen and (max-width: 900px)
{
    li{
        column-count: 2;
    }
}

@media screen and (max-width: 700px)
{
    li{
        column-count: 1;
    }
}

<div>
            <li data-title="Multimedia and the World Wide Web" data-offered-fall="yes">HCI 201</li>	
            <li data-title="Formatting Digital Pages II" data-offered-fall="no">HCI 271</li>	
            <li data-title="Foundations of Digital Design" data-offered-fall="no">HCI 302</li>	
            <li data-title="Analysis and Design for Human-Computer Interaction" data-offered-fall="no">HCI 312</li>	
            <li data-title="Usability Issues for Electronic Commerce" data-offered-fall="no">HCI 341</li>	
            <li data-title="Usability in Computing Systems" data-offered-fall="no">HCI 350</li>	
            <li data-title="Foundations of Digital Design" data-offered-fall="yes">HCI 402</li>	
            <li data-title="Web Site Design forHCI" data-offered-fall="yes">HCI 406</li>	
            <li data-title="Designing for Content Management Systems" data-offered-fall="no">HCI 421</li>	
            <li data-title="Multimedia" data-offered-fall="no">HCI 422</li>	
            <li data-title="Internet Multimedia" data-offered-fall="no">HCI 423</li>	
            <li data-title="Prototyping and Implementation" data-offered-fall="yes">HCI 430</li>	
            <li data-title="User-Centered Web Development" data-offered-fall="no">HCI 432</li>	
            <li data-title="Introduction to User-Centered Design" data-offered-fall="yes">HCI 440</li>	
            <li data-title="Introduction to User-Centered Development" data-offered-fall="no">HCI 441</li>	
            <li data-title="Inquiry Methods and Use Analysis" data-offered-fall="yes">HCI 445</li>	
            <li data-title="Foundations of Human-Computer Interaction" data-offered-fall="yes">HCI 450</li>	
            <li data-title="Interaction Design and Information Architecture" data-offered-fall="yes">HCI 454</li>	
            <li data-title="Information Architecture and Content Strategy" data-offered-fall="no">HCI 457</li>	
            <li data-title="Usability Evaluation Methods" data-offered-fall="yes">HCI 460</li>	
            <li data-title="Digital Design" data-offered-fall="yes">HCI 470</li>	
            <li data-title="Accessibility and Design for Diverse Users" data-offered-fall="yes">HCI 511</li>	
            <li data-title="Information Visualization and Infographics" data-offered-fall="no">HCI 512</li>	
            <li data-title="Design/Strategies for Internet Commerce" data-offered-fall="no">HCI 513</li>	
            <li data-title="Global User Research" data-offered-fall="no">HCI 514</li>	
            <li data-title="Design Ethnography" data-offered-fall="no">HCI 515</li>	
            <li data-title="Learner-Centered Design" data-offered-fall="no">HCI 520</li>	
            <li data-title="UX Strategy and Web Analytics" data-offered-fall="no">HCI 522</li>	
            <li data-title="Mobile Design" data-offered-fall="no">HCI 530</li>	
            <li data-title="Embodied Interaction" data-offered-fall="no">HCI 545</li>	
            <li data-title="Social Interaction Design" data-offered-fall="no">HCI 553</li>	
            <li data-title="Interaction Design and Analysis" data-offered-fall="no">HCI 558</li>	
            <li data-title="User Experience Design Practicum" data-offered-fall="no">HCI 580</li>	
            <li data-title="Topics in Human-Computer Interaction" data-offered-fall="yes">HCI 590</li>	
            <li data-title="Human-Computer Interaction Capstone" data-offered-fall="yes">HCI 594</li>	
            <li data-title="CI Research Capstone" data-offered-fall="no">HCI 596</li>	
        </div>

Solution

It's simple, because you using the column-count css in the li and not the div who became container of the li.

so what you must do, add class of the div and write css code of the div with column-count.

@media screen and (max-width: 1280px)
{
    .container{
        column-count: 3;
    }
}

@media screen and (max-width: 900px)
{
    .container{
        column-count: 2;
    }
}

@media screen and (max-width: 700px)
{
    .container{
        column-count: 1;
    }
}

Here the Fiddle. If you read properly the example of w3 school, you will get it. And here's the column-count description at w3, don't forget add the webkit and mozz