HTML CSS

RESPONSIVE HORIZONTAL LIST WITH HTML CSS

<ul class="hlist">   <li>Doge</li> <li>Pupper</li>   <li>Doggo</li> <li>Woofer</li>   <li>Yapper</li> <li>Yipper</li> </ul>

REGULAR HTML LIST

01

.hlist {   REMOVE DEFAULT INDENTATIONS   padding: 0; margin: 0;   TO HORIZONTAL LIST WITH CSS FLEX   display: flex; }

HORIZONTAL LIST CSS

02

NO BULLET POINTS .hlist li { list-style-type: none; }

ON SMALL SCREENS @media screen and (max-width: 768px) {   ALLOW LIST ITEMS TO WRAP   .hlist { flex-wrap: wrap; }     2 ITEMS PER ROW   .hlist li { width: 50%; } }

RESPONSIVE LIST CSS

03