SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy 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.

    responsive.css.zip

    Here is my responsive css:
    Code 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;}
    }
    Last edited by SpacePhoenix; Aug 25, 2013 at 14:44. Reason: css tags around css code

  2. #2
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think, you're using the codes in a wrong way. Please, arrange them in a correct order. I hope it will work out.

  3. #3
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jasonfoster View Post
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Member
    Join Date
    Sep 2013
    Location
    Guelph, Ontario, Canada
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because your imageslider is a pre-made plugin I suggest the same as ralph.m.
    Check out this site: http://visionwidget.com/responsive-j...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!

  6. #6
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much! This was supposed to be responsive but apparently not fully. I will check out that site.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    
    .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.
    Code:
    @media screen and (max-width:540px) {
    
    .wrap-header, .wrap-pagetop, #content, .zerogrid, .block02 {
       width: auto;
     }
    }
    I think that should work better


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •