Search code examples
twitter-bootstrapmobilesupersized

Bootstrap and Supersized js incompatibility on mobile devices

I'm using Bootstrap v2.3.2, Bootstrap Responsive v2.3.2 and Supersized 3.2.7 on my site. Desktop version is good but on mobile devices and tablets I've got a left margin/padding, see screenshot below. I tried to remove lines 804 and 805 of bootstrap-responsive.css: @media (max-width: 767px) { body { padding-right: 20px; padding-left: 20px; } with no success.

landscape

Is anybody know what is causing this problem and how to solve it?

Here's the HTML code I use:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">
        <link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
    </head>

    <body>

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span4"></div>
            <div class="span4"></div>
            <div class="span4"></div>
        </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script> 
    <script src="js/supersized.3.2.7.js"></script>

    <script type="text/javascript">

        jQuery(function($){

            $.supersized({

                // Functionality
                slideshow               :   1,          // Slideshow on/off
                autoplay                :   1,          // Slideshow starts playing automatically
                start_slide             :   1,          // Start slide (0 is random)
                stop_loop               :   0,          // Pauses slideshow on last slide
                random                  :   0,          // Randomize slide order (Ignores start slide)
                slide_interval          :   11000,      // Length between transitions
                transition              :   1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   1000,       // Speed of transition
                new_window              :   1,          // Image links open in new window/tab
                pause_hover             :   0,          // Pause slideshow on hover
                keyboard_nav            :   1,          // Keyboard navigation on/off
                performance             :   3,          // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                image_protect           :   1,          // Disables image dragging and right click with Javascript

                // Size & Position                         
                min_width               :   0,          // Min width allowed (in pixels)
                min_height              :   0,          // Min height allowed (in pixels)
                vertical_center         :   0,          // Vertically center background
                horizontal_center       :   1,          // Horizontally center background
                fit_always              :   0,          // Image will never exceed browser width or height (Ignores min. dimensions)
                fit_portrait            :   1,          // Portrait images will not exceed browser height
                fit_landscape           :   0,          // Landscape images will not exceed browser width

                // Components                           
                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                thumb_links             :   1,          // Individual thumb links for each slide
                thumbnail_navigation    :   0,          // Thumbnail navigation
                slides                  :   [           // Slideshow Images

                                                    {image : 'img/yun_13242.jpg'},
                                                    {image : 'img/yun_13242.jpg'}
                                            ],

                // Theme Options               
                progress_bar            :   1,          // Timer for each slide                         
                mouse_scrub             :   0

            });
        });

    </script>
    </body>
</html>
Solution

  • try this:

    1. don't remove lines 804 and 805 of bootstrap-responsive.css simply make padding-left : 0 ; and padding-right: 0; .

    2. try to inspect elements with google chrome inspector at the breakpoints for mobile devices and tablets to calculate the space value (it seems that the dive around your image that has padding left).

    update:

    try this:

    1. in bootstrap.css line number 812 you have margin: 0 0 10px 25px;
    2. change it to margin: 0 0 10px 0;

    try this and give me feedback.