CODEWITHSUNDEEP
cssresponsive-designresponsiveness
IseNgaRt
IseNgaRt

Reputation: 609

Responsive issue making a sliced slider

I'm creating a slice slider for educational purposes to try out responsive design.

I've been trying for 3 days now to make it responsive but everything I tried didn't work.

Whenever someone hovers over the background of page, a hidden div will be shown with 4 images inside. And when I zoom in, the last image is changing positions.

This is my code:

<div class="container">
   <div class="reveal unreveal">
    <div  class="caption">
     <div class="contContainer">
      <div class="imgContainer">
       <img src="css/image1.png" />
      </div>
      <div class="imgContainer">
       <img src="css/image2.png" />
      </div>
      <div class="imgContainer">
       <img src="css/image3.png" />
      </div>
      <div class="imgContainer2">
       <img class="yoloimg" src="css/image4.png" />
      </div>
    </div>
   </div>
 </div>
</div>

CSS:

body {
  background: #222;
  max-width:100%;
  min-width:80%;
}
.contContainer {
width:90%;
padding:5px;
margin:0 auto;
}
.imgContainer {
width:20%;
padding:0px;
margin:0 auto;
text-align:center;
position:relative;
float:left;
margin-left:5px;

}
.imgContainer2 {
width:38%;
padding:0px;
margin:0 auto;
text-align:center;
position:relative;
float:left;
}
.yoloimg {
width:94%;
height:auto;
}
.imgContainer img {
width:96.8%;
height:auto;

}
.unreveal {

  background: url("ayo_bottom.png") 0px 278px, url("ayo_top.png") 0px 0px, #ffffff;
  background-repeat: no-repeat;
  -webkit-transition: background-position 0.3s ease;
  -moz-transition: background-position 0.3s ease;
  background-size:contain;
  transition: background-position 0.3s ease;
}

 .unreveal:hover {
   background-repeat: no-repeat;
  -webkit-transition: background-position 0.3s ease;
  -moz-transition: background-position 0.3s ease;
  transition: background-position 0.3s ease;
  background: url("ayo_bottom.png") 0px 500px, url("ayo_top.png") 0px -50px, #ffffff;
  background-repeat: no-repeat;
  background-size:contain;
}

.reveal {
  max-width:1100px !important;
  width:100%;
  height:auto;
  min-height:800px;
  float: left;
  margin:0 auto;
}

div.caption {
        top: 32%; 
        max-width:1100px;
        position: absolute;
        margin:0 auto;
        display:none;
    background:#2b2a28;

}

I use Skeleton 2.0.4 ( used Bootstrap also, but nothing happened ). I think that the problem is that I use 2 images for background at .unreveal class , but I don't know what else I have to do. I used max-width:everywhere, margin:0 auto and I have media queries from skeleton.

I uploaded it if someone would like to give it a glance: test-site .

Thanks in advance.

EDIT: after fixing the image re-position there is still an issue with container . When i zoom in , the height is rising stopping at 2400px img of what happening . I used max-height:1100px on container and body but doest work. i used different doctypes also without result.

Upvotes: 0

Views: 70

Answers (1)

sbatson5
sbatson5

Reputation: 648

The issue you are seeing is your % widths:

.imgContainer {
  width: 20%;
  padding: 0px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  float: left;
  margin-left: 5px;
}

When you hit 765px wide, you get 20% of each (153px computed) plus the 5px for the margin-left: 158 x 3 = 474

You imgContainer2 has a width of 38% which pushes it just over when you are at 765px and forces it on to the next line. Either get rid of the margin-left entirely, or write a media query for 765px:

@media screen and (max-width: 765px) {
    .imgContainer {
        margin-left: 0;
    }
}

If you play around with the sizes, you will see the jump to the next line happens at 765px exactly. At 766px wide, it looks fine. As a general rule, you want to stay away from pixel margins and paddings when dealing with % widths. You will always run into an issue at some point when resizing your screen.

Upvotes: 1

Related Questions