how to make the slide responsive

Question

how to make the slide responsive

Asked 5 years, 8 months ago

Viewed 103 times

1

people I’m with this slide trying to make it responsive only it’s covering some things that comes just below the slide (I’m closing the tag in the right place), and the image when I decrease is showing all right more when I let the normal size looks horrible. help me. I already appreciate any kind of help ! <3

* {margin:0;
    padding: 0;
    font-size: 100%;
    border:none;
    outline:none;
    font-weight: 300;
    box-sizing: border-box;
    
}
img{
    max-width:100%;
}
.inner-wrapper {
    
  width: 100%;
  height: 470px;
  position: absolute;
  top: 0;
  left: 0;
  margin-bottom: 0px;
  overflow: hidden;
}

#slider-wrapper {
max-height: 60em;
    margin: 1em auto;
    position: relative;

}

#s1 {
  padding: 6px;
  background: #000000;
  position: absolute;
  left: 50%;
  bottom: 25px;
  margin-left: -36px;
  border-radius: 20px;
  opacity: 0.3;
  cursor: pointer;
  z-index: 999;
}

#s2 {
  padding: 6px;
  background: #000000;
  position: absolute;
  left: 50%;
  bottom: 25px;
  margin-left: -12px;
  border-radius: 20px;
  cursor: pointer;
  z-index: 999;
}

#s3 {
  padding: 6px;
  background: #000000;
  position: absolute;
  left: 50%;
  bottom: 25px;
  margin-left: 12px;
  border-radius: 20px;
  cursor: pointer;
  z-index: 999;
}

#s4 {
  padding: 6px;
  background: #000000;
  position: absolute;
  left: 50%;
  bottom: 25px;
  margin-left: 36px;
  border-radius: 20px;
  cursor: pointer;
  z-index: 999;
}

#s1:hover,
#s2:hover,
#s3:hover,
#s4:hover {
  opacity: .50;
}



.control {
  display: none;
}

#Slide1:checked ~ .overflow-wrapper {
  margin-left: 0%;
}

#Slide2:checked ~ .overflow-wrapper {
  margin-left: -100%;
}

#Slide3:checked ~ .overflow-wrapper {
  margin-left: -200%;
}

#Slide4:checked ~ .overflow-wrapper {
  margin-left: -300%;
}

#Slide1:checked + #s1 {
  opacity: 1;
}

#Slide2:checked + #s2 {
  opacity: 1;
}

#Slide3:checked + #s3 {
  opacity: 1;
}

#Slide4:checked + #s4 {
  opacity: 1;
}

.overflow-wrapper {
  width: 400%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: hidden;
  z-index: 1;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
transition-duration: .5s;
    transition-timing-function: ease-in;
    transition-delay: 0.3s;
}

.slide img {
  width: 25%;
  float: left;
position: relative;
}

    <div id="slider-wrapper">
        <div class="inner-wrapper">
            <input checked type="radio" name="slide" class="control" id="Slide1" />
            <label for="Slide1" id="s1"></label>
            <input type="radio" name="slide" class="control" id="Slide2" />
            <label for="Slide2" id="s2"></label>
            <input type="radio" name="slide" class="control" id="Slide3" />
            <label for="Slide3" id="s3"></label>
            <input type="radio" name="slide" class="control" id="Slide4" />
            <label for="Slide4" id="s4"></label>
            <div class="overflow-wrapper">
                <a class="slide"><img src="https://i1.wp.com/gamelogia.com.br/wp-content/uploads/2016/11/gamer.jpg?resize=1280%2C640&ssl=1" /></a>
                <a class="slide"><img src="https://compass-ssl.xbox.com/assets/dc/48/dc486960-701e-421b-b145-70d04f3b85be.jpg?n=Game-Hub_Content-Placement-0_New-Releases-No-Copy_740x417_02.jpg" /></a>
                <a class="slide" ><img src="https://blog.sympla.com.br/wp-content/uploads/2018/08/Como-organizar-um-campeonato-de-v%C3%ADdeo-game-Capa.png" /></a>
                <a class="slide"><img src="http://noticias.universia.com.br/net/images/cultura/e/ev/eve/evento-sao-paulo-relacao-games-artes-noticias.jpg" /></a>
            </div>
        </div>
    </div>

2 answers

2

Basically your problem is that class .inner-wrapper is with position:absolute, Then it leaves the content stream and what comes below is covered by the images... It has nothing to do with Flexbox and even less with Bootstrap!

Behold

* {margin:0;
    padding: 0;
    font-size: 100%;
    border:none;
    outline:none;
    font-weight: 300;
    box-sizing: border-box;

}
img{
    max-width:100%;
}
.inner-wrapper {

  width: 100%;
  height: 470px;
  /* position: absolute; */
  top: 0;
  left: 0;
  margin-bottom: 0px;
  overflow: hidden;
}

#slider-wrapper {
max-height: 60em;
    margin: 1em auto;
    position: relative;

}

#s1 {
  padding: 6px;
  background: #000000;
  position: absolute;
  left: 50%;
  bottom: 25px;
  margin-left: -36px;
  border-radius: 20px;
  opacity: 0.3;
  cursor: pointer;
  z-index: 999;
}

#s2 {
  padding: 6px;
  background: #000000;
  position: absolute;
  left: 50%;
  bottom: 25px;
  margin-left: -12px;
  border-radius: 20px;
  cursor: pointer;
  z-index: 999;
}

#s3 {
  padding: 6px;
  background: #000000;
  position: absolute;
  left: 50%;
  bottom: 25px;
  margin-left: 12px;
  border-radius: 20px;
  cursor: pointer;
  z-index: 999;
}

#s4 {
  padding: 6px;
  background: #000000;
  position: absolute;
  left: 50%;
  bottom: 25px;
  margin-left: 36px;
  border-radius: 20px;
  cursor: pointer;
  z-index: 999;
}

#s1:hover,
#s2:hover,
#s3:hover,
#s4:hover {
  opacity: .50;
}



.control {
  display: none;
}

#Slide1:checked ~ .overflow-wrapper {
  margin-left: 0%;
}

#Slide2:checked ~ .overflow-wrapper {
  margin-left: -100%;
}

#Slide3:checked ~ .overflow-wrapper {
  margin-left: -200%;
}

#Slide4:checked ~ .overflow-wrapper {
  margin-left: -300%;
}

#Slide1:checked + #s1 {
  opacity: 1;
}

#Slide2:checked + #s2 {
  opacity: 1;
}

#Slide3:checked + #s3 {
  opacity: 1;
}

#Slide4:checked + #s4 {
  opacity: 1;
}

.overflow-wrapper {
  width: 400%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: hidden;
  z-index: 1;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
transition-duration: .5s;
    transition-timing-function: ease-in;
    transition-delay: 0.3s;
}

.slide img {
  width: 25%;
  float: left;
position: relative;
}

<div id="slider-wrapper">
    <div class="inner-wrapper">
        <input checked type="radio" name="slide" class="control" id="Slide1" />
        <label for="Slide1" id="s1"></label>
        <input type="radio" name="slide" class="control" id="Slide2" />
        <label for="Slide2" id="s2"></label>
        <input type="radio" name="slide" class="control" id="Slide3" />
        <label for="Slide3" id="s3"></label>
        <input type="radio" name="slide" class="control" id="Slide4" />
        <label for="Slide4" id="s4"></label>
        <div class="overflow-wrapper">
            <a class="slide"><img src="https://i1.wp.com/gamelogia.com.br/wp-content/uploads/2016/11/gamer.jpg?resize=1280%2C640&ssl=1" /></a>
            <a class="slide"><img src="https://compass-ssl.xbox.com/assets/dc/48/dc486960-701e-421b-b145-70d04f3b85be.jpg?n=Game-Hub_Content-Placement-0_New-Releases-No-Copy_740x417_02.jpg" /></a>
            <a class="slide" ><img src="https://blog.sympla.com.br/wp-content/uploads/2018/08/Como-organizar-um-campeonato-de-v%C3%ADdeo-game-Capa.png" /></a>
            <a class="slide"><img src="http://noticias.universia.com.br/net/images/cultura/e/ev/eve/evento-sao-paulo-relacao-games-artes-noticias.jpg" /></a>
        </div>
    </div>
</div>

<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores voluptate placeat, ad fugiat modi dignissimos nulla id repellat odit ipsa tenetur incidunt aspernatur veritatis fugit unde perspiciatis sunt error inventore necessitatibus pariatur! Laborum sit eligendi esse odio eos temporibus perferendis laboriosam non sunt atque facere expedita aperiam, deleniti quis! Reprehenderit ipsam dolor amet asperiores, eveniet cupiditate obcaecati incidunt nobis nam neque quae unde eaque, recusandae, perspiciatis quo temporibnsequuntur? Incidunt cumque rerum iste!
</p>

Hugo, how do you test the rendering this way in the browser? maybe this isn’t the right place to ask this but don’t know where to ask beyond here.

– Renan

2019/04/05 at 14:42
@Renan on Chrome presses F12, ai next to the Inspect arrow has an icon that when you click on it enables this responsive window with this resize etc

– hugocsl

2019/04/05 at 14:50
1

Vlw, I made it.

– Renan

2019/04/05 at 15:00
1

You are a God !! I LOVE YOU <3

– caiquesey

2019/04/05 at 15:11
@caiquesey dough

– hugocsl

2019/04/05 at 15:41

Browser other questions tagged html css responsive

You are not signed in. Login or sign up in order to post.

by Pier Bottero • 46 points · Answer 1 · 2019-04-05T14:35:29+00:00

Hello!

When you say "some things" you mean the slider navigation Bullets? If it is, the position of the Bullets is stuck by the bottom 25px; I suggest you position vertically using top instead of bottom, and to stay responsive, use vw units.

#s1,#s2,#s3,#s4 {
  padding: 6px;
  background: #000000;
  position: absolute;
  left: 50%;
  top:60vw;
  margin-left: -36px;
  border-radius: 20px;
  opacity: 0.3;
  cursor: pointer;
  z-index: 999;
}

#s2 {
  margin-left: -12px;
}

#s3 {
  margin-left: 12px;
}

#s4 {
  margin-left: 36px;
}

For the height of the Inner-wrapper, I suggest using tbm vw

.inner-wrapper {

  width: 100%;
  height: 90vw;
  position: absolute;
  top: 0;
  left: 0;
  margin-bottom: 0px;
  overflow: hidden;
}

Upshot: https://codepen.io/anon/pen/oOLXgZ