Search code examples
htmlcssrendering

I am trying to create 3 columns with responsive fade rendering. How do I get them to display next to each other rather than on top of each other?

How do I get the three columns to display next to each other rather than on top of each other? Of course I also want them to be responsive and fade.

My fiddle: https://jsfiddle.net/Spleendrivel/dswufb78/3/

<!DOCTYPE html>
<html>

<head>
    <meta name="ac:base" content="/AlmostYou">
    <base href="/AlmostYou/">
    <style>
        /* Slider */
        /* Slideshow container */
        #slide-container-1 {
            position: relative;
            max-width: 100%;
            /* responsiveness */
        }

        /* Slider */
        /* Slideshow container */
        #slide-container-2 {
            position: relative;
            max-width: 100%;
            /* responsiveness */
        }

        /* Slider */
        /* Slideshow container */
        #slide-container-3 {
            position: relative;
            max-width: 100%;
            /* responsiveness */
        }

        /* First element to be in block mode for responsiveness */
        #slide-element-1 {
            display: block;
            /* to get the dimensions set */
            width: 100%;
            height: auto;
        }

        /* First element to be in block mode for responsiveness */
        #slide-element-4 {
            display: block;
            /* to get the dimensions set */
            width: 100%;
            height: auto;
        }

        /* First element to be in block mode for responsiveness */
        #slide-element-7 {
            display: block;
            /* to get the dimensions set */
            width: 100%;
            height: auto;
        }

        /* Other element to be in absolute position */
        #slide-element-2,
        #slide-element-3,
        #slide-element-5,
        #slide-element-6,
        #slide-element-8,
        #slide-element-9 {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        /* Style images */
        .slide-image {
            width: 100%;
            border-radius: 20px;
        }

        /* Style text */
        .slide-text {
            position: absolute;
            bottom: 10px;
            background-color: #0042b1bb;
            color: white;
            width: 100%;
            text-align: center;
            font-size: 1.5rem;
        }

        /* Animation settings for individual elements */
        /* For more images the animations have to be adjusted */
        #slide-element-1 {
            animation: fade-1 10s infinite;
            -webkit-animation: fade-1 10s infinite;
        }

        #slide-element-2 {
            animation: fade-2 10s infinite;
            -webkit-animation: fade-2 10s infinite;
        }

        #slide-element-3 {
            animation: fade-3 10s infinite;
            -webkit-animation: fade-3 10s infinite;
        }

        #slide-element-4 {
            animation: fade-4 10s infinite;
            -webkit-animation: fade-4 10s infinite;
        }

        #slide-element-5 {
            animation: fade-5 10s infinite;
            -webkit-animation: fade-5 10s infinite;
        }

        #slide-element-6 {
            animation: fade-6 10s infinite;
            -webkit-animation: fade-6 10s infinite;
        }

        #slide-element-7 {
            animation: fade-7 10s infinite;
            -webkit-animation: fade-7 10s infinite;
        }

        #slide-element-8 {
            animation: fade-8 10s infinite;
            -webkit-animation: fade-8 10s infinite;
        }

        #slide-element-9 {
            animation: fade-9 10s infinite;
            -webkit-animation: fade-9 10s infinite;
        }

        /* and more if there are more slides to show */
        @keyframes fade-1 {
            0% {
                opacity: 1;
            }

            33% {
                opacity: 0;
            }

            66% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes fade-2 {
            0% {
                opacity: 0;
            }

            33% {
                opacity: 1;
            }

            66% {
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes fade-3 {
            0% {
                opacity: 0;
            }

            33% {
                opacity: 0;
            }

            66% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes fade-4 {
            0% {
                opacity: 1;
            }

            33% {
                opacity: 0;
            }

            66% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes fade-5 {
            0% {
                opacity: 0;
            }

            33% {
                opacity: 1;
            }

            66% {
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes fade-6 {
            0% {
                opacity: 0;
            }

            33% {
                opacity: 0;
            }

            66% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes fade-7 {
            0% {
                opacity: 1;
            }

            33% {
                opacity: 0;
            }

            66% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes fade-8 {
            0% {
                opacity: 0;
            }

            33% {
                opacity: 1;
            }

            66% {
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes fade-9 {
            0% {
                opacity: 0;
            }

            33% {
                opacity: 0;
            }

            66% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }
    </style>

</head>

<body>
    <div class="row">
        <div class="column">
            <div id="slide-container-1">
                <div id="slide-element-1">
                    <img class="slide-image" src="barn-3.jpg">
                </div>
                <div id="slide-element-2">
                    <img class="slide-image" src="barn-2.jpg">
                </div>
                <div id="slide-element-3">
                    <img class="slide-image" src="barn-1.jpg">
                </div>
            </div>
        </div>
        <div class="column">
            <div id="slide-container-2">
                <div id="slide-element-4">
                    <img class="slide-image" src="cat-1.jpg">
                </div>
                <div id="slide-element-5">
                    <img class="slide-image" src="cat-2.jpg">
                </div>
                <div id="slide-element-6">
                    <img class="slide-image" src="cat-3.jpg">
                </div>
            </div>
        </div>
        <div class="column">
            <div id="slide-container-3">
                <div id="slide-element-7">
                    <img class="slide-image" src="dog-2.jpg">
                </div>
                <div id="slide-element-8">
                    <img class="slide-image" src="dog-1.jpg">
                </div>
                <div id="slide-element-9">
                    <img class="slide-image" src="dog-3.jpg">
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Make sure the screen width is no more than 350 to see my problem.

I am adding additional lines of text over and over because I can not submit my question without more text content. I am adding additional lines of text over and over because I can not submit my question without more text content. I am adding additional lines of text over and over because I can not submit my question without more text content. I am adding additional lines of text over and over because I can not submit my question without more text content. I am adding additional lines of text over and over because I can not submit my question without more text content.

Solution

  • Here is the final answer: my JSFiddle: https://jsfiddle.net/Spleendrivel/mcyvpx3r/2/

    <!DOCTYPE html>
<html>

<head>
    <meta name="ac:base" content="/AlmostYou">
    <base href="/AlmostYou/">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: Arial;
        }

        .header {
            text-align: center;
            padding: 32px;
        }

        .row {
            display: -ms-flexbox;
            /* IE10 */
            display: flex;
            -ms-flex-wrap: wrap;
            /* IE10 */
            flex-wrap: wrap;
            padding: 0 4px;
        }

        /* Create four equal columns that sits next to each other */
        .column {
            -ms-flex: 33%;
            /* IE10 */
            flex: 33%;
            max-width: 33%;
            padding: 0 4px;
        }

        .column img {
            margin-top: 8px;
            vertical-align: middle;
            width: 100%;
        }

        .fadein-1 img {
            position: absolute;
            top: 0;
            -webkit-animation-name: fade;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-duration: 6s;
            animation-name: fade;
            animation-iteration-count: infinite;
            animation-duration: 6s;
            -ms-flex: 33%;
            /* IE10 */
            flex: 33%;
            max-width: 33%;
            padding: 0 4px;
        }

        .fadein-2 img {
            position: absolute;
            top: 0;
            -webkit-animation-name: fade;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-duration: 6s;
            animation-name: fade;
            animation-iteration-count: infinite;
            animation-duration: 6s;
            -ms-flex: 33%;
            /* IE10 */
            flex: 33%;
            max-width: 33%;
            padding: 0 4px;
        }

        .fadein-3 img {
            position: absolute;
            top: 0;
            -webkit-animation-name: fade;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-duration: 6s;
            animation-name: fade;
            animation-iteration-count: infinite;
            animation-duration: 6s;
            -ms-flex: 33%;
            /* IE10 */
            flex: 33%;
            max-width: 33%;
            padding: 0 4px;
        }

        @-webkit-keyframes fade {
            0% {
                opacity: 0;
            }

            20% {
                opacity: 1;
            }

            33% {
                opacity: 1;
            }

            53% {
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes fade {
            0% {
                opacity: 0;
            }

            20% {
                opacity: 1;
            }

            33% {
                opacity: 1;
            }

            53% {
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        #f2 {
            -webkit-animation-delay: -4s;
        }

        #f3 {
            -webkit-animation-delay: -2s;
        }

        #f5 {
            -webkit-animation-delay: -4s;
        }

        #f6 {
            -webkit-animation-delay: -2s;
        }

        #f8 {
            -webkit-animation-delay: -4s;
        }

        #f9 {
            -webkit-animation-delay: -2s;
        }
    </style>

</head>


<body>

    <div class="row">
        <div class="column">
            <div class="fadein-1">
                <img id="f3" src="http://snaklvr.com/barn-3.jpg">
                <img id="f2" src="http://snaklvr.com/barn-2.jpg">
                <img src="http://snaklvr.com/barn-1.jpg">
            </div>
        </div>
        <div class="column">
            <div class="fadein-2">
                <img src="http://snaklvr.com/cat-3.jpg">
                <img id="f5" src="http://snaklvr.com/cat-2.jpg">
                <img id="f6" src="http://snaklvr.com/cat-1.jpg">
            </div>
        </div>
        <div class="column">
            <div class="fadein-3">
                <img src="http://snaklvr.com/dog-3.jpg">
                <img id="f8" src="http://snaklvr.com/dog-2.jpg">
                <img id="f9" src="http://snaklvr.com/dog-1.jpg">
            </div>
        </div>
    </div>
</body>

</html>

    I am sure there is some unnecessary CSS or possibly redundancy, but it works as I need!