Bootstrap 3 Media Queries working on Chrome but not on Mobile devices

Question

Ok the question has been asked many time before and I went through each and everyone of them but it didn't worked for me

In mobile view I want to set slideshow col position from Relative to Static which will result into this

But instead I'm seeing this on mobile (adjacent col is overlapping)

which means Col is still in relative position and media Queries are not working on mobile platforms however It does work in Desktop Chrome browser.

I used meta tags and different combinations of min and max values (after confirming screen resolution)

for example

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

 /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-width : 320px)
    and (max-width : 480px) {

section.banner .slideshow-col{
        position: static;
    }

    /* Smartphones (landscape) ----------- */
    @media only screen
    and (min-width : 320px) {

section.banner .slideshow-col{
        position: static;
    }

 @media (min-width : 700px) {
   section.banner .slideshow-col{
        position: static;

    }

@media (min-width: 992px) {


        section.banner .slideshow-col{
        position: relative;
    }}

@media (min-width: 1200px) {


        section.banner .slideshow-col{
        position: relative;
    }}

My website is here http://

Any hint?

Answer 1

Try to use this solutions

@media screen and (max-width: 760px){
    .slideshow-col {
        position: relative;
        height: 300px; <--  height of the slideshow
        // You can use min & max height of slideshow for mobile devices
        height: auto;
        min-height: xxx;
        max-height: xxx;
    }
}