Div sort de la fenêtre lors du redimensionnement

Question

Chaque fois que je redimensionne le navigateur, le div sort de la fenêtre. J'utilise le scroll de jquery pour naviguer dans les divs. Mais quand je redimensionne le #home div cela fonctionne bien, mais quand je redimensionne d'autres divs, il sort de la fenêtre.

S'il vous plaît aidez-moi, voici le link sur le site.

Voici le code i utilisé,

$(document).ready(function() 
{ 
$("#bg-home").backstretch("images/Bg-home3.jpg"); 
var images = ['1.jpg', '2.jpg','3.jpg']; 
$("#container").backstretch('images/' + images[Math.floor(Math.random() * images.length)]); 
    $("#draggable").draggable({ 
     drag: function() { 
     $(".scrolldown span").css("color","lightgreen").html("Drop"); 
     }, 
     stop: function() { 
     $(".scrolldown span").css("color","white").html("Drag"); 
     },axis: "x",containment:"#menu",scroll: false//,grid: [ 159,0 ] 
    }); 
$(".content,.content1").droppable({drop: function() { 
     var $url = $(this); 
     document.title = $url.attr('alt'); 
     $('html, body').scrollTo($url.attr('id'),500,"easeInOutExpo"); 
     //event.preventDefault(); 
     }}); 
     $("#welcome").effect("slide",3000); 
     $("#welcome").click(function() 
     { 
      $("#welcome").animate({left: "-1000px"},"easeInOutBounce"); 
      $(".about_w").animate({left: "100px"},"easeInOutBounce"); 
      $(".about_w").delay(4000).animate({left: "-800px"}); 
      $("#welcome").delay(4500).animate({left: "100px"}); 

     }); 
$('#menu a').bind('click',function(event){ 
     var $url = $(this); 
     document.title = $url.attr('alt'); 
     $('html, body').scrollTo($url.attr('href'),500,"easeInOutExpo"); 
     event.preventDefault(); 
    }); 
$("#about .text p").vertiscroll({ width:6, color:'#f07','cover': 200,'areacursor': 'pointer' }); 
$('.side_container').slimScroll({ 
    height:"88%", 
    color: '#fff', 
    start: $('.side_container'), 
    alwaysVisible: false 
}); 
$('#container_wrap_metro').slimScroll({ 
    height:"400px", 
    color: '#fff', 
    railVisible: false, 
    alwaysVisible: false 
}); 
$(".menu nav").click(function(){ 
    $url = $(this); 
    $(".text p").load($url.attr('id')); 
}); 
function loading_show() 
{ 
$('#loading').html("<p style='color:white;'>Loading</p><br><img src='images/loading.gif'/>").fadeIn('fast'); 
} 

function loading_hide() 
{ 
$('#loading').fadeOut(); 
} 
//Status 
function loadData(page) 
{ 
loading_show(); 
$("#container_wrap_metro").html(""); 
$.ajax({ 
     url: "load_data.php", 
     type: "post", 
     data: "page="+page, 
     success: function(data){ 
      loading_hide(); 
      $("#container_wrap_metro").html(data); 
     }, 
     error:function(){ 
      alert("failure"); 
      $("#container_wrap_metro").html('Unable to process request!'); 
     } 
    }); 
} 
function loads(page) 
{ 
$.ajax({ 
     url: "load_10.php", 
     type: "post", 
     data: "page="+page, 
     success: function(data){ 
      $(".side_container").html(data); 
     }, 
     error:function(){ 
      alert("failure"); 
      $(".side_container").html('Unable to process request!'); 
     } 
    }); 
} 
loads(1); 
//Search 
$("#result").keyup(function(){ 
    $(".side_container").html('<center><i>Fetching...</i></center>') 
    var q = $(this).val(); 
    $.get("results.php?q="+q, function(data){ 
    if(q){ 
     $(".side_container").html(data); 
    } 
    else { 
     loads(1); 
    } 
}); 
}); 
}); 

Answer 1

Pour cela, vous avez besoin des conceptions sensibles et que vous devez donner la largeur comme dans « % » partout mais dans votre script que vous utilisez gauche: .. px comme ça .... Sa création la meilleure chose problem.So d'abord leur donner ou deuxième chose réactive le remplacer par une réponse ..

Essayez cette LINK

Answer 2

Essayez d'éditer les lignes suivantes:

$("#welcome").animate({left: "-1000px"},"easeInOutBounce"); 
$(".about_w").animate({left: "100px"},"easeInOutBounce"); 
$(".about_w").delay(4000).animate({left: "-800px"}); 
$("#welcome").delay(4500).animate({left: "100px"}); 

Et:

height:"400px", 

La réponse précédente est juste. Quand il s'agit de conception web responsive, utilisez em ou% lors de la définition des tailles. Vous pouvez utiliser 100% à la place ou 40 em. Vous pouvez changer les valeurs jusqu'à obtenir la sortie désirée.