Responsive slide show not resizing

I have a responsive html5 website that is not resizing the slide show on mobile. works fine on laptop/desktop and tablet.
www.jonnypye.com I can not figure out what might be causing this.
Any help is appreciated.

Here is my responsive css:

html {
***-webkit-text-size-adjust: none;
}
.video embed,
.video object,
.video iframe {
***width: 100%;
***height: auto;
}
img{
    max-width:100%;
    height: auto;
***    width: auto\\9; /* ie8 */
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .wrap-header, .wrap-pagetop, #content, .zerogrid, .block02{width:768px;}
    
    .zerogrid .col-1-3{width:30%;}
    .zerogrid .col-right{width:184px;}
    .zerogrid .col-left{width:504px;}
    
    .feature{padding:0px;}
    .welcome{margin:0px;}
}

@media only screen and (max-width: 767px) {
    .wrap-header, .wrap-pagetop, #content, .zerogrid, .zerogrid .col-right, .zerogrid .col-left, .block02{width:100%; margin:0px; padding:0px;}
    
    .feature{padding:0px;}
    .welcome{margin:0px;}
    
    .wrap-header {margin-top: 0px;height:150px;}
    
    
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .zerogrid .col-1-3{width:45%;}
    
    .wrap-header #logo{top:auto; bottom:10px;}
    
    nav{top:20px; left:5px;}
}

@media only screen and (max-width: 479px) {
    .zerogrid .col-1-3{width:100%;}
    
    .wrap-header{height: 200px;}
    .wrap-header #logo{top:auto; bottom:20px; left:5px;}
    .wrap-pagetop #search{top:45px; left:5px;}
    
    nav{top:40px; left:5px;}
    
    #main-content img{width:80%; height: 80%;}
    
    footer .copyright{height:50px;}
}

I think, you’re using the codes in a wrong way. Please, arrange them in a correct order. I hope it will work out.

I wasn’t aware that it mattered the order that the codes were in as long as they are all there.

It can be a pretty painful exercise to make something like this responsive. There are all kinds of setting to change, like the fixed height on the slide container set by JavaScript and so on. My preference these days is to find a slideshow script that is already designed to work responsively, as it’s otherwise a bit of a nightmare to track down, adjust and override all the settings that prevent it from being responsive to screen widths.

Because your imageslider is a pre-made plugin I suggest the same as ralph.m.
Check out this site: http://visionwidget.com/responsive-jquery-slideshow.html
There are tons of free responsive sliders and instead of reinventing the wheel you’re better of implementing something what works straight out of the box.
Good luck!

Thank you very much! This was supposed to be responsive but apparently not fully. I will check out that site.

Hi,

It just looks like you need a couple of tweaks.

The first is to get rid of the horizontal scrollbar caused by your logo being too wide.




.wrap-header #logo {
right:0;
width:auto;
}

The above is an over-ride and should follow the original (or edit the original with the new rule). You can’t have an absolute element starting 30px from the left and then be 100% wide as it will then be 30px too wide. Just set right:0 to set the width.

You seem to have set a fixed width for some content so I would set it back to fluid in a media query.


@media screen and (max-width:540px) {

.wrap-header, .wrap-pagetop, #content, .zerogrid, .block02 {
   width: auto;
 }
}

I think that should work better :slight_smile: