CODEWITHSUNDEEP
htmlcssresponsiveelement
Perezo123
Perezo123

Reputation: 31

Elements getting far from each other after changing viewport

please can somenone help me with this responsive problem. After changing viewport my header and main elements are going far from each other. jsfiddle

<header>
  <div class="slider">
    <img src="picture1" alt=""> 
   <img src="picture2" alt="" >
  </div>
</header>

<main>
  <h1>Hello Hello</h1>
</main>

CSS

 body{
      margin:0;
    }

.slider{
  height: 36em; 
  width:100%;
  position: relative;
  overflow: hidden;
}

.slider img{
  width:100%;
  height: auto;
  position: absolute;  
  top:0;
  left:0;
}

main{
  margin-top: 0.1em;
}

Upvotes: 0

Views: 29

Answers (1)

SpaceDogCS
SpaceDogCS

Reputation: 2968

Thats because you set a fixed height 

.slider{
  height: 36em; // <-- HERE
  width:100%;
  position: relative;
  overflow: hidden;
}

So when the screen decreases, the image decreases too, and the .slider keeps the same height

Just remove this fixed height and change it to max-height, case the image needs to be absolute, you'll need to calculate the slide's height manually with javascript

Jsfiddle

Javascript with jquery

$(document).ready(function(){
    $(window).resize();
});

$(window).resize(function(){
    var height = $('.slider img').height();
    $('.slider').height(height);
});

CSS

body{
  margin:0;
}

.slider{
  max-height: 36em; 
  width:100%;
  position: relative;
  overflow: hidden;
}

.slider img{
  width:100%;
  height: auto;
  position: absolute;  
  top:0;
  left:0;width:100%;
}

main{
  margin-top: 0.1em;
}

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class="slider">
    <img src="http://www.freewalkertours.com/rio/wp-content/uploads/sites/2/2017/04/o-que-fazer-no-rio-de-janeiro-cristo.jpg" alt=""> 
   <img src="https://mmoexaminer.com/wp-content/uploads/2017/10/sw352356.jpg" alt="" >
  </div>
</header>

<main>
  <h1>Hello Hello</h1>
</main>

Upvotes: 2

Related Questions