'I'm trying to prevent an image slider from streching the viepoint. Need some assistance

I'm pretty new to HTML and CSS and I'm currently building a website for a Uni project. In my website, i have an image slider but it seems to stretch the page horizontally and I can't seem to figure out how to prevent this. I've tried some different overflow properties on different divs but nothing works correctly. If anyone has any ideas on how to fix this it would be great.

Thanks.

@import url('https://fonts.googleapis.com/css2?family=Mea+Culpa&family=Open+Sans&display=swap');

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html{
  scroll-behavior: smooth;
}

body{
  background-color: rgba(242, 194, 219, 0.8);
  justify-content: center;
}


.logo{
  font-family: Mea Culpa;
  color: #fff;
  height: 60px;
  font-size: 50px;
  line-height: 60px;
  padding: 0 20px;
  text-align: center;
  box-sizing: border-box;
  float: left;
  font-weight: 500;
  text-decoration: none;
}

li, a{
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
}

header{
  position: relative;
  padding: 10px;
  margin: 20px auto;
  max-width: 2200px;
  background-color: rgb(220, 170, 196);
  border-radius: 4px;
  box-shadow: 5px 2px 5px rgb(0,0,0,.3);
}

nav{
  float: right;
}

.clearfix{
  clear: both;
}

nav ul{
  margin: 0;
  padding: 0;
  display: inline-flex;
}

nav ul li{
  list-style: none;
}

nav ul li a{
  display: block;
  margin: 10px 0;
  padding: 10px 20px;
  text-decoration: none;
  color: #fff;
}

nav ul li a:hover{
  background: rgba(130, 64, 98, 0.8);
  transition: 0.5s;
}

h2{
  font-family: 'Mea Culpa';
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-size: 60px;
  letter-spacing: 5px;
  padding: 10px;
  font-weight: 500;
}

.about{
  background: url(https://i.imgur.com/kqqWW2G.jpeg) no-repeat left;
  overflow: hidden;
  background-size: 55%;
  background-color: rgba(242, 194, 219, 0);
  border-radius: 4px;
  padding: 100px 20px 100px 20px;
  margin: 20px;
  
}

.inner-section{
  width: 55%;
  float: right;
  border-radius: 4px;
  padding: 20px;
  background-color: rgb(220, 170, 196);
  box-shadow: 5px 4px 5px rgba(0,0,0,0.3);
}

.inner-section h2{
  text-align: center;
  font-family: 'Mea Culpa';
  color: #fff;
  font-size: 50px;
  font-weight: 500;
}

.text{
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #fff;
  line-height: 30px;
  text-align: center;
}

.gallery-title{
  position: relative;
  display: center;
  float: none;
  width: 45%;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 40px;
  left: 0;
  border-radius: 4px;
  padding: 10px;
  background-color: rgb(220, 170, 196);
  box-shadow: 5px 4px 5px rgba(0,0,0,0.3);
}


@media screen and (max-width: 2000px) and (min-width: 600px){

  h2{
    font-size: 70px;
  }
  
  header{
    align-items: center;
    margin: 20px;
  }

  .inner-section{
    padding: 80px;
  }

  .slides{
    display: none;
  }

  .side-container{
    margin-top: 20px;
    max-width: 2000px;
    height: 60vh;
    align-items: center;
    overflow: hidden;
  }

  .image-slider{
    width: 50%;
    height: 600px;
    position: absolute;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.7s;
    left: 0;
  }
  
  .slides-div{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 30px 0 30px;
  }

   .img{
    position: relative;
    width: 300px;
    height: 400px;
    transition: .5s;
  }

  .button{
    position: absolute;
    width: 300px;
    height: 400px;
    transition: .5s;
    background-color: rgba(0,0,0,0.6);
  }

  .button:hover{
    background-color: rgba(0,0,0,0.2);
  }

  #slider-span1:target ~ .image-slider #img-1,
  #slider-span1:target ~ .image-slider #button-1{
    width: 380px;
    height: 485px;
    background-color: transparent;
    filter: saturate(100%);
  }

  #slider-span2:target ~ .image-slider #img-2,
  #slider-span2:target ~ .image-slider #button-2{
    width: 380px;
    height: 485px;
    background-color: transparent;
    filter: saturate(100%);
  }

  #slider-span3:target ~ .image-slider #img-3,
  #slider-span3:target ~ .image-slider #button-3{
    width: 380px;
    height: 485px;
    background-color: transparent;
    filter: saturate(100%);
  }

  #slider-span4:target ~ .image-slider #img-4,
  #slider-span4:target ~ .image-slider #button-4{
    width: 380px;
    height: 485px;
    background-color: transparent;
    filter: saturate(100%);
  }

  #slider-span5:target ~ .image-slider #img-5,
  #slider-span5:target ~ .image-slider #button-5{
    width: 380px;
    height: 485px;
    background-color: transparent;
    filter: saturate(100%);
  }

  #slider-span6:target ~ .image-slider #img-6,
  #slider-span6:target ~ .image-slider #button-6{
    width: 380px;
    height: 485px;
    background-color: transparent;
    filter: saturate(100%);
  }

  /*image position*/
  #slider-span1:target ~ .image-slider {left: 5%;}
  #slider-span2:target ~ .image-slider {left: 15%;}
  #slider-span3:target ~ .image-slider {left: 5%;}
  #slider-span4:target ~ .image-slider {left: -5%;}
  #slider-span5:target ~ .image-slider {left: -25%;}
  #slider-span6:target ~ .image-slider {left: -50%;}
}
  
}

@media screen and (max-width:1000px){
  
  .about{
    background-size: 100%;
    padding: 100px 40px;
  }
  
  .inner-section{
    width: 100%;
  }
  
  .menu-toggle{
    disply: block;
    width: 40px;
    height: 40px;
    margin: 10px;
    background-color: rgb(220, 170, 196);
    float: right;
    cursor: pointer;
    text-align: center;
    font-size: 30px;
  }
  
  .menu-toggle:before{
    color: #fff;
    content: '\f0c9';
    font-family: fontAwesome;
    line-height: 20px; 
  }

  nav{
    display: none;
  }

  nav.active{
    text-align: center;
    display: block;
    width: 100%;
  }

  nav.active ul{
    display: block;
  }

  nav.active ul li{
    margin: 0;
  }

  .menu-toggle.active:before{
    color: #fff;
    content: '\f00d';
  }
}

@media (max-width: 600px){

  .logo{
    font-size: 33px;
    font-weight: 500;
  }
  
  .menu-toggle{
    disply: block;
    width: 40px;
    height: 40px;
    margin: 10px;
    background-color: rgb(220, 170, 196);
    float: right;
    cursor: pointer;
    text-align: center;
    font-size: 30px;
  }
  
  .menu-toggle:before{
    color: #fff;
    content: '\f0c9';
    font-family: fontAwesome;
    line-height: 20px; 
  }

  nav{
    display: none;
  }

  nav.active{
    text-align: center;
    display: block;
    width: 100%;
  }

  nav.active ul{
    display: block;
  }

  nav.active ul li{
    margin: 0;
  }

  .menu-toggle.active:before{
    color: #fff;
    content: '\f00d';
  }

  .about{
    padding: 20px;
    background: none;
  }
  
  .inner-section{
    text-align: justify;
    padding:20px;
  }

  input.set { 
  display:none; 
  }

  .image-slider{
    display: none;
  }
  
input.set { display:none; }

#slide1:checked ~ .mask .overflow { margin-left:0; }
#slide2:checked ~ .mask .overflow { margin-left:-100%; }
#slide3:checked ~ .mask .overflow { margin-left:-200%; }
#slide4:checked ~ .mask .overflow { margin-left:-300%; }

.slides{ 
  margin-left: 10px;
  margin-right: 10px;
  width: 90%; 
  position: relative; 
}

.slides .mask{ 
  position: relative;
  width: 90%; 
  overflow: hidden; 
  margin: auto; 
  }

.slides .overflow { width:400%; -webkit-transform:translateZ(0); -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out; }

.slides .slide { width:25%; height:500px; line-height:400px; float:left; }

#pic1{
  background-image: url(https://i.imgur.com/fBYEYXb.png);
  background-position: center center;
  background-attachment: fixed;
  
}

#pic2{
  background-image: url(https://i.imgur.com/brTXHnI.png);
  background-position: center center;
  background-attachment: fixed;
  
}

#pic3{
  background-image: url(https://i.imgur.com/KpsKtMx.jpeg);
  background-position: center center;
  background-attachment: fixed;
  
}

#pic4{
  background-image: url(https://i.imgur.com/nsr11Wr.jpeg);
  background-position: center center;
  background-attachment: fixed;
}

#controls { width:100%; }

#controls label { display:none; width:5%; height:60px; opacity:0.3; position:absolute; top:50%; margin-top:-30px; cursor:pointer; background:#000; }

#controls label:hover { opacity:0.8; }

#slide1:checked ~ #controls label:nth-child(2), #slide2:checked ~ #controls label:nth-child(3), #slide3:checked ~ #controls label:nth-child(4) { right:0; display:block; }

#slide2:checked ~ #controls label:nth-child(1), #slide3:checked ~ #controls label:nth-child(2), #slide4:checked ~ #controls label:nth-child(3) { left:0; display:block; }
}
  
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Styles By Saoirse</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
  
<body>
    <header>
        <nav></nav>
          <a href="#" class="logo">Styled By Saoirse</a>
      <div class="menu-toggle"></div>
      <nav>
        <ul>
          <li><a href="#" class="active">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Gallery</a></li>
          <li><a href="#">Prices</a></li>
          <li><a href="#">Contact</a></a></li>
        </ul>
      </nav>
      <div class="clearfix"></div>
    </header>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/ed0b3c3afa.js" crossorigin="anonymous"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('.menu-toggle').click(function(){
          $('.menu-toggle').toggleClass('active')
          $('nav').toggleClass('active')
        })
      })
    </script>

  <div class="about">
    <div class="inner-section">
    <h2>About</h2>
      <p class="text">
        Saoirse has a passion for hair styling. She has been working in the industry for 4 years now with a ton of experience in areas such as, hair extensions, coloring, cutting and styling.
        Saoirse has earned certificates in extensions and coloring and is renouned for her skill and profesionalism.
        </p>
      </div>
    </div>

  <div class="gallery-title">
    <h2>Gallery</h2>
  </div>
    <!--image slider for tablet and desktop view-->
    <div class="side-container">
        <span class="slider-span" id="slider-span1"></span>
        <span class="slider-span" id="slider-span2"></span>
        <span class="slider-span" id="slider-span3"></span>
        <span class="slider-span" id="slider-span4"></span>
        <span class="slider-span" id="slider-span5"></span>
        <span class="slider-span" id="slider-span6"></span>

      <div class="image-slider">
        
        <div class="slides-div" id="slide-1">
          <img src="https://i.imgur.com/fBYEYXb.png" alt="" class="img" id="img-1">
          <a href="#slider-span1" class="button" id="button-1"></a>
      </div>
        
        <div class="slides-div" id="slide-2">
          <img src="https://i.imgur.com/brTXHnI.png" alt="" class="img" id="img-2">
          <a href="#slider-span2" class="button" id="button-2"></a>
      </div>
        
        <div class="slides-div" id="slide-3">
          <img src="https://i.imgur.com/KpsKtMx.jpeg" alt="" class="img" id="img-3">
          <a href="#slider-span3" class="button" id="button-3"></a>
      </div>
        
        <div class="slides-div" id="slide-4">
          <img src="https://i.imgur.com/nsr11Wr.jpeg" alt="" class="img" id="img-4">
          <a href="#slider-span4" class="button" id="button-4"></a>
      </div>

        <div class="slides-div" id="slide-5">
          <img src="https://i.imgur.com/81CcyML.png" alt="" class="img" id="img-5">
          <a href="#slider-span5" class="button" id="button-5"></a>
      </div>

        <div class="slides-div" id="slide-6">
          <img src="https://i.imgur.com/0tmRxJi.jpeg" alt="" class="img" id="img-6">
          <a href="#slider-span6" class="button" id="button-6"></a>
      </div>
    </div>

      <!--image slider for mobile view-->
    <div class="slides">
  <input checked type="radio" name="slider" id="slide1" class="set" />
  <input type="radio" name="slider" id="slide2" class="set" />
  <input type="radio" name="slider" id="slide3" class="set" />
  <input type="radio" name="slider" id="slide4" class="set" />  
          
  <div class="mask">    
    <div class="overflow">
      
      <div class="slide" id="pic1"></div>
      <div class="slide" id="pic2"></div>
      <div class="slide" id="pic3"></div>
      <div class="slide" id="pic4"></div>
      
    </div>    
  </div>

  <div id="controls" onclick="">  
    <label for="slide1"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
    <label for="slide4"></label>    
  </div>
</div>

  
</body>
</html>

html css

Sources

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

Source: Stack Overflow

Solution	Source

'I'm trying to prevent an image slider from streching the viepoint. Need some assistance

Sources

Related Questions