Make Flex List Items Stagger Into Multiple Lines On Smaller Screens

I am attempting to make a css flex list stagger text onto two lines on smaller screens however nothing I've tried seems to work. I've attempted to use spans and br at several diffe

Solution 1:

An initial setting of a flex container is flex-wrap: nowrap. This means that flex items are confined to a single line and will not wrap. You can override this default with flex-wrap: wrap.

Revised Codepen

Reference:

• flex-wrap definition ~ MDN (note the "Initial Value")

Solution 2:

try with this this stylesheet

<style>
        .div {
            width: 100%;
            height: 225px;
            background-color: #dbdbdb;
            white-space: normal;
            background-attachment: fixed;
            border-top: 1px solid black;
            border-bottom: 1px solid black;
            font-size: 30px;
        }

        .div h1 {
            font-size: 70px;
            color: black;
            font-family: "Helevtica";
            position: relative;
            top: -15px;
        }

        #list li {
            margin-right: 2em;
            position: relative;
            bottom: -25px;
            color: black;
        }

        #list {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: center;
            list-style-type: none;
            padding-right: 25px;
        }

    </style>

change the margin of the li element as per your requirement and you may also set a min-width to the li elements