Questions › CSS overflow:hidden is not working

I was tryed to create a slider and the slider is working but only one part is not working .

"overflow:hidden" This part is not working

Please tell me what is issue on my code . I will update this part .

This is my HTML:

<!-- Slider --><div class="slider-main">
<!-- <div class="container site-test_1"> -->
    <img id="slider-imge1" class="img-responsive" src="images/slider-images/slide_image-001.jpg" alt="Please wait..."/>
      <img id="slider-imge2" class="img-responsive" src="images/slider-images/slide_image-002.jpg" alt="Please wait..."/>
      <img id="slider-imge3" class="img-responsive" src="images/slider-images/slide_image-003.jpg" alt="Please wait..."/>
      <img id="slider-imge4" class="img-responsive" src="images/slider-images/slide_image-004.jpg" alt="Please wait..."/>
      <img id="slider-imge5" class="img-responsive" src="images/slider-images/slide_image-005.jpg" alt="Please wait..."/>
<!-- </div> -->
</div> <!-- End Slider -->

This is my CSS part:

.slider-main{
    width:100%;
    /* height:505px; */
    height:auto;
    overflow:hidden !important;
    position:relative;
    z-index:1;
}


.slider-main img{
            width:100%;
            max-height:500px;
            overflow:hidden !important;
 }
Comments :
G.L.P replied

can you create a demo with relevant code?

If I add a height on the .slider-main, it seems to work fine. Please show us how it's not working.

G-Cyr replied

white-space : nowrap; ? to keep img on a single line maybe .... Not enough code of yours to tell ...

It is working but only Small tablet landscape (800x600), Tablet portrait (768x1024), Tablet landscape (1024x768) . It is not working in Mobile portrait (320x480), Mobile landscape (480x320) Small tablet portrait (600x800)

It is working but only Small tablet landscape (800x600), Tablet portrait (768x1024), Tablet landscape (1024x768) . IT IS NOT WORKING ONLY IN Mobile portrait (320x480), Mobile landscape (480x320) Small tablet portrait (600x800)


2 Answers :
Pouya p answered

I think Your max-height is bigger than slider-main div.

Read details: http://www.w3schools.com/cssref/pr_pos_overflow.asp

Gourab Mazumder replied
It is working but only Small tablet landscape (800x600), Tablet portrait (768x1024), Tablet landscape (1024x768) . IT IS NOT WORKING ONLY IN Mobile portrait (320x480), Mobile landscape (480x320) Small tablet portrait (600x800);
Pouya p replied
for responsive codes use auto on width and height .;
Jackson answered

Try putting the max-height: 500px on the .slider-main instead:

.slider-main {
    max-height: 500px;
}
Gourab Mazumder replied
Thanks, Problem Solved;
Gourab Mazumder replied
It is working but only Small tablet landscape (800x600), Tablet portrait (768x1024), Tablet landscape (1024x768) . It is not working in Mobile portrait (320x480), Mobile landscape (480x320) Small tablet portrait (600x800);
Gourab Mazumder replied
It is working but only Small tablet landscape (800x600), Tablet portrait (768x1024), Tablet landscape (1024x768) . IT IS NOT WORKING ONLY IN Mobile portrait (320x480), Mobile landscape (480x320) Small tablet portrait (600x800);
AlexG replied
@GourabMazumder Are you using different devices? Mobile Browsers? Have you tried refreshing the pages after turning your device? (most Plugins do not check for window change);