Min height for slideshow not working

Question

My slideshow on top of page has width:100% and height:400px css attributes.

But I want to make a responsive web page and make the slideshow height variable according to the width of the page.

I have tried using min-height but it doesn't work.

I tried putting the container's height on 400px and image height on auto, which solves the problem partly as slideshow's height changes responsively but the container stays on 400px which makes a empty space between slider and menu bar.

Do you have any ideas?

My css is as following:

.container { 
    padding:0px; 
    margin:0px; 
    position:relative; 
    padding:0; 
    height:400px; 
}

.img { 
    position:absolute; 
    left:0; 
    top:0; 
    width:100%; 
    height:400px; 
    min-height:auto; 
}

http://jsfiddle.net/maaah1/cm11jpjb/

Can u share your code with demo in JSFIDDlE. There is no float:both; css property. My suggestion u can use all the slider images as common size. — ItzMe_Ezhil, Apr 29 '15 at 07:36

Alvaro Menéndez · Answer 1 · 2015-04-29T09:18:45.507

0

As you use html images insteed of background-imageyou just don't need to set any height at all to make it responsive.

I have deleted all unecesary stuff from your css and add a container with fixed min-width:800px to show the slider better.

Css:

.container {
    width:100%;
    max-width:800px;
    margin:0 auto;
}
.fadein {
    padding:0px;
    margin:0px;
    position:relative;
    padding:0;
    width:100%;
}   
.fadein img { 
    position:absolute; 
    left:0; 
    top:0; 
    width:100%;   
}

and your modified FIDDLE

Edited: fantastic how I did exactly as the op asked (I made the slider responsive) and got downvoted. It's good enough if this "answer is not usefull" but... nvm. Imo he should specify the container needed a height as there were goign to be content below.

I have added to the fiddle this jquery:

$( document ).ready(function() {
    $( ".fadein" ).each(function() {
        var newHeight = 0, $this = $( this );
        $.each( $this.children(), function() {
            newHeight += $( this ).height();
        });
        $this.height( newHeight/3 );
    });
});

So it will calculate the height of the children of fadein and set it as height on document ready. Notice the newHeight/3 as the 3 is the number of children inside the parent. If you add more images, change also this number.

New fiddle

edited Apr 29 '15 at 09:18

answered Apr 29 '15 at 08:56

Alvaro Menéndez

8,766
3
37
57

your solution make a container height to 0 (not adapt to content), try to add a text after the div and you won't see it because it is cover by absolute images – Luckyn Apr 29 '15 at 09:09
I edited my solution so now the height is set. Anyway ty for the downvote. – Alvaro Menéndez Apr 29 '15 at 09:19
now your solutions looks similar to mine, but I prefer checking the biggest than do the sum and divide (no need to change code when adding element :)), but be careful that height won't change when user manually change windows size (that's why I added resize listener) – Luckyn Apr 29 '15 at 09:27
also for your edit message, he already asked about the container height : `I tried putting the container's height on 400px and image height on auto, which solves the problem partly as slideshow's height changes responsively but the container stays on 400px which makes a empty space between slider and menu bar.` – Luckyn Apr 29 '15 at 09:28
Thank you a lot for your help. I am using a CMS (squarespace) and I inject code inside the CMS. I am quite a junior, so excuse me if I say wrong but it seems like not putting the height value on 400px as I did on my original CSS makes the menu div (which should sit under the slideshow) jumping up on the picture, and as soon as I add a fixed height, the java code doesn't work anymore, so the problem is still somehow unsolved! – M Nazari Apr 29 '15 at 19:50

score 0 · Answer 2 · answered Apr 29 '15 at 09:03

You need some JavaScript to adapt the container height to absolute element in it.

you can see result on this fiddle , call the function once to change height at window loading, then use $(window).resize(changeHeight); to change it everytime the window is resize

$(function() {
  $('.fadein img:gt(0)').hide();
  setInterval(function() {
    $('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
  }, 3000);
});

function changeHeight() {
  var biggestHeight = "0";
  // Loop through elements children to find & set the biggest height
  $(".fadein *").each(function() {
    // If this elements height is bigger than the biggestHeight
    if ($(this).height() > biggestHeight) {
      // Set the biggestHeight to this Height
      biggestHeight = $(this).height();
    }
  });

  // Set the container height
  $(".fadein").height(biggestHeight);
}
changeHeight();
$(window).resize(changeHeight);

.fadein {
  padding: 0px;
  margin: 0px;
  position: relative;
  padding: 0;
}
.fadein img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="fadein">
  <img src="http://i.imgur.com/FGLGf6M.png" align="middle">
  <img src="http://i.imgur.com/WPo9fHR.jpg" align="middle">
  <img src="http://i.imgur.com/IHIUS1K.png" align="middle">
</div>I'm a text

Thank you a lot for your help. I am using a CMS (squarespace) and I inject code inside the CMS. I am quit a junior, so excuse me if I say wrong but it seems like not putting the height value on 400px as I did on my original CSS makes the menu div (which should sit under the slideshow) jumping up on the picture, and as soon as I add a fixed height, the java code dosnt work anymore, so the problem is still somehow there! — M Nazari, Apr 29 '15 at 19:07
yes, if you use only our CSS you'll have this problem, but the `changeHeight()` function in JavaScript is here to choose the height value for you, that's why you don't need to say yourself `height:400px` ! btw I never used a CMS so I don't know if there is a problem from it — Luckyn, Apr 30 '15 at 07:15
also if the menu div have an absolute position it might be an other reason... can you edit and give us the menu div and style ? (just put height/width/border on an empty div, I don't think we need its content) — Luckyn, Apr 30 '15 at 07:18
Here is CSS for Navigation bar: .horizontal-navigation-bar { line-height: 1 !important; margin: auto; width: auto; max-width: @siteWidth; position: relative; padding: @navSpacing 0; } nav { width: auto; margin: auto; display: inline-block; vertical-align: middle; position: relative;} — M Nazari, May 03 '15 at 13:13

Min height for slideshow not working

2 Answers2