Question 252084 in Html Question posted in
Some basic documentation can be found here.

Html – Images Not Displaying on Mobile and Tablet, Text and Header Do Not Update When Banners Change

I’m encountering an issue with my website where the images aren’t displaying on mobile and tablet devices. Additionally, when I switch between different banners (tabs), the associated text and header do not update as expected.

Here is the code:

   <style>
        @media screen and (max-width: 1024px) {
            body {
                margin: 0;
                font-family: 'Nunito Sans', sans-serif;
            }

            .slideshow-container {
                width: 100vw;
                height: 100vh;
                position: relative;
                overflow: hidden;
                background-color: #000;
            }

            .slide {
                width: 100%;
                height: 100%;
                opacity: 0;
                visibility: hidden;
                position: absolute;
                top: 0;
                left: 0;
                transition: opacity 0.5s ease-in-out;
            }

            .slide.active {
                opacity: 1;
                display: inline;
            }

            .slide img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .gradient-overlay {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 1%, transparent 25%);
                z-index: 2;
            }

            .tab-banners-horizontal {
                position: absolute;
                bottom: 10px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                justify-content: space-around;
                align-items: center;
                z-index: 99;
            }

            .tab-banners-horizontal .tab-banner {
                padding: 10px 10px;
                cursor: pointer;
                color: #A4A4A4;
                transition: all 0.3s ease;
                font-size: 20px;
                font-weight: 400;
            }

            .tab-banners-horizontal .tab-banner.active {
                color: white;
            }

            .tab-banner.inactive {
                color: #A4A49B;
            }

            /* Stil for tekstseksjonen */
            .text-section {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: #fff;
                text-align: center;
                padding: 10px;
                max-width: 400px;
                z-index: 99;
            }

            .text-section h1 {
                font-size: 35px;
                line-height: 45px;
                font-family: 'Nunito Sans'!important;
                font-weight: 400;
                margin: 0;
                color: white;
            }

            .text-section p {
                font-size: 18px;
                line-height: 26px;
                margin: 10px 0;
                color: white;
            }

            .arrow-icon {
                background-image: url('');
                background-size: contain;
                background-repeat: no-repeat;
                width: 60px;
                height: 60px;
                cursor: pointer;
                position: absolute;
                bottom: 10px;
                left: 50%;
                transform: translateX(-50%);
            }

            .logo {
                position: absolute;
                top: 10px;
                left: 50%;
                transform: translateX(-50%);
                z-index: 100;
            }

            .logo img {
                width: 180px;
                height: auto;
            }
        }
    </style>

    <body>
    <div class="logo">
        <img src="">
    </div>

    <div class="slideshow-container">
        <div class="gradient-overlay"></div>
        
        <div class="slide" id="seil">
            <img src="">
        </div>
        <div class="slide" id="solseil">
            <img src="">
        </div>
        <div class="slide" id="rigg">
            <img src="">
        </div>
    </div>
    
    <div class="text-section">
        <h1 id="image-title">Tittel for valgt bilde/tab</h1>
        <p id="image-text">Dette er teksten som tilhører valgt tab/container.</p>
        <div class="arrow-icon" id="image-arrow"></div>
    </div>

    <div class="tab-banners-horizontal">
        <div class="tab-banner active" id="seil-banner">
            Seil
        </div>
        <div class="tab-banner" id="solseil-banner">
            Solseil
        </div>
        <div class="tab-banner" id="rigg-banner">
            Rigg
        </div>
    </div>

   <script>
    document.addEventListener("DOMContentLoaded", function () {
    const slides = document.querySelectorAll(".slide");
    const banners = document.querySelectorAll(".tab-banner");
    const imageTitle = document.getElementById("image-title");
    const imageText = document.getElementById("image-text");
    const arrowIcon = document.getElementById("image-arrow");

    const slideData = [
        {
            title: "Seil",
            text: "Seilservice er stolte representanter av OneSails og produserer kvalitetssikre seil i hele Norge – og verden. Ved å tilby turseil, jolleseil, regattaseil og service sørger vi får at du alltid er en bølge foran!",
            link: ""
        },
        {
            title: "Solseil",
            text: "Vi leverer både små og store solseil og seilløsninger til privat og næring. Solseil er en videreutvikling av seil og brukes i det daglige for å oppgradere estetikken i tilværelsen din, samtidig som du sørger for god beskyttelse mot omgivelsene. Ta kontakt med oss i dag for å finne din løsning.",
            link: ""
        },
        {
            title: "Rigg",
            text: "Vi streber etter å gi deg en pålitelig rigg som gir deg full kontroll og maksimal ytelse på vannet. Vi benytter kun materialer av høyeste kvalitet og våre produkter er designet for å vare. Vårt erfarne team står alltid til din disposisjon for reparasjoner og vedlikehold av riggen din, slik at du kan fortsette å nyte seilingen uten bekymringer.",
            link: ""
        }
    ];

    let currentSlideIndex = 0; // Store the index of the current slide

    const imagePreloads = [];
    for (let i = 0; i < slides.length; i++) {
        imagePreloads[i] = new Image();
        imagePreloads[i].src = slides[i].querySelector("img").src;
    }

    function updateSlideInfo(slideIndex) {
        imageTitle.textContent = slideData[slideIndex].title;
        imageText.textContent = slideData[slideIndex].text;
        arrowIcon.setAttribute("data-link", slideData[slideIndex].link);
    }

    function showSlide(slideIndex) {
        slides[slideIndex].style.opacity = 0; // Set initial opacity to 0
        slides[slideIndex].style.visibility = "visible"; // Set visibility to visible
        updateSlideInfo(slideIndex);

        // Use setTimeout to trigger the fade-in effect
        setTimeout(function () {
            slides[slideIndex].style.opacity = 1; // Set opacity to 1 for fade-in
        }, 5);
    }

    banners[0].classList.add("active");
    showSlide(0);
   });
   </script>

What I’ve Tried:
I’ve checked that the image paths are correct.
I’ve tested the site on multiple mobile and tablet devices with the same result.
The text and header do not update when I switch between banners.

Expected Behavior:
I expect the images to display correctly on mobile and tablet devices. Additionally, when I switch between different banners, I want the text and header to update to match the selected banner.

Any help or insights on what could be causing this issue would be greatly appreciated. Thank you!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I made this using the display:none and display:block first. But the fade-in animation did not work. So i changed to visibility and opactiy. That made the animation work with the images.

    I use Elementor, and that has a code widget. I have seperated tablet and mobile from desktop. Images and animation works well on desktop. However the images and the animation does not work on tablet and mobile.

     <style>
   @media screen and (max-width: 1024px) {
    body {
        margin: 0;
        font-family: 'Nunito Sans', sans-serif;
    }

    .slideshow-container {
        width: 100vw;
        height: 100vh;
        position: relative;
        overflow: hidden;
        background-color: #000;
    }

    .slide {
        width: 100%;
        height: 100%;
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        transition: opacity 0.5s ease-in-out;
    }

    .slide.active {
        opacity: 1;
        visibility: visible; /* Add this line to ensure visibility */
    }

    .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block; /* Add this line to ensure image display */
    }

        .gradient-overlay {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 1%, transparent 25%);
            z-index: 2;
        }

        .tab-banners-horizontal {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 99;
        }

        .tab-banners-horizontal .tab-banner {
            padding: 10px 10px;
            cursor: pointer;
            color: #A4A4A4;
            transition: all 0.3s ease;
            font-size: 20px;
            font-weight: 400;
        }

        .tab-banners-horizontal .tab-banner.active {
            color: white;
        }

        .tab-banner.inactive {
            color: #A4A49B;
        }

        /* Stil for tekstseksjonen */
        .text-section {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            text-align: center;
            padding: 10px;
            max-width: 400px;
            z-index: 99;
        }

        .text-section h1 {
            font-size: 35px;
            line-height: 45px;
            font-family: 'Nunito Sans'!important;
            font-weight: 400;
            margin: 0;
            color: white;
        }

        .text-section p {
            font-size: 18px;
            line-height: 26px;
            margin: 10px 0;
            color: white;
        }

        .arrow-icon {
            background-image: url('');
            background-size: contain;
            background-repeat: no-repeat;
            width: 60px;
            height: 60px;
            cursor: pointer;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }

        .logo {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100;
        }

        .logo img {
            width: 180px;
            height: auto;
        }
    }
</style>

<div class="logo">
    <img src="" alt="Logo">
</div>

<div class="slideshow-container">
    <div class="gradient-overlay"></div>
    
    <div class="slide" id="seil">
        <img src="" alt="Seilbilde">
    </div>
    <div class="slide" id="solseil">
        <img src="" alt="Solseilbilde">
    </div>
    <div class="slide" id="rigg">
        <img src="" alt="Riggbilde">
    </div>
 </div>

 <div class="text-section">
    <h1 id="image-title">Tittel for valgt bilde/tab</h1>
    <p id="image-text">Dette er teksten som tilhører valgt tab/container. 
</p>
    <div class="arrow-icon" id="image-arrow"></div>
</div>

<div class="tab-banners-horizontal">
    <div class="tab-banner active" id="seil-banner">
        Seil
    </div>
    <div class="tab-banner" id="solseil-banner">
        Solseil
    </div>
    <div class="tab-banner" id="rigg-banner">
        Rigg
    </div>
</div>

  2. 0

    You should use media queries to display certain elements based on resolution instead of doing it on javascript, for instance if you want the image to show on tablet you can use media query with specified resolution, or if you want to hide it, media query with specified resolution, then inside the container with images add display: none and it’s gonna be hidden.

    Here is a good guide on media queries along with default values for each device: https://css-tricks.com/a-complete-guide-to-css-media-queries/

    as for the header and banner, I imagine you mean they do not update according to resolution, if that’s the case, it’s because you’re using absolute values when sizing them, absolute value is not responsive, if you want to make it responsive, you should use dynamic values, such as em, rem, percentage(%) etc

    this is a nice guide about responsiveness: https://kinsta.com/blog/responsive-web-design/

    I hope I was helpful, good luck!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search