'HTML to auto width/text for all devices

I'm working on am auto slide function for my website which will be using on a pc and different cells devices.

How do I make this HTML code work natively on all devices making the text legible for each container of comments?

The code I have seems to be a fixed height & width which I'm guessing I have to change it there, but I could be wrong as I'm new to this.

Any help would be greatly appreciated

<!DOCTYPE html>
<html>
<head>
    <title>HTML and CSS Slideshow</title>
    <style>
    body {
        font-family: Helvetica, sans-serif;
        padding: 8;
        text-align: center;
        font-size: 2;
        alignSelf: 'flex-start';
    }
    
    /* Styling the area of the slides */
    
    #slideshow {
        overflow: hidden;
        height: 210px;
        width: 628px;
        margin: 0 auto;
      
    }
    
    /* Style each of the sides
    with a fixed width and height */
    
    .slide {
        float: left;
        height: 210px;
        width: 628px;
       

    }
    
    /* Add animation to the slides */
    
    .slide-wrapper {
        
        /* Calculate the total width on the
    basis of number of slides */
        width: calc(100%* 4);
        
        /* Specify the animation with the
    duration and speed */
        animation: slide 20s ease infinite;
    }
    
    
    /* Define the animation
    for the slideshow */
    
    @keyframes slide {
        
        /* Calculate the margin-left for
    each of the slides */
        20% {
            margin-left: 0px;
        }
        40% {
            margin-left: calc(-100% * 1);
        }
        60% {
            margin-left: calc(-100%* 2);
        }
        80% {
            margin-left: calc(-100%* 3);
        }
    }
    </style>
</head>

<body>
    
    <!-- CUSTOMER COMMENTS-->
    <div id="slideshow">
        <div class="slide-wrapper">
            
            <!-- ***ADD CUSTOMER COMMENTS BELOW*** -->
        <!-- CUSTOMER COMMENTS1-->
            <div class="slide">
                <h1 class="slide-number">
                
                    "TESTME1"
                </h1>
                <p>HI</p>   
            </div>
            
             <!-- CUSTOMER COMMENTS2--> 
            <div class="slide">
                <h1 class="slide-number">
                    "TESTME2"
                </h1>
                <p>HI</p>  
            </div>
            
            <!-- CUSTOMER COMMENTS3-->
            <div class="slide">
                <h1 class="slide-number">
                    "TESTME3"
                </h1>
                <p>HI</p>
               
            </div>
            
            <!-- CUSTOMER COMMENTS4-->
            <div class="slide">
                <h1 class="slide-number">
                    "TESTME3"
                </h1>
                <p>HI</p> 
                
            </div>
        </div>
    </div>
</body>
</html>
html


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions