2015-01-12 38 views
0

我已经创建了自己的网站(投资组合),但每次它被调整到移动设备,我在右侧biiiig白色空间。在手机上自举侧滚动

已经尝试过:

body { 
overflow-x:hidden; 
} 

html, body{ 
overflow-x:hidden; 
} 

<div class="wrapper"> ->> added overflow-x:hidden; to .wrapper 

这些工作都没有,我不能找到它我的生活。

每一个帮助很好评! :)

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>martin mičulka</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <!-- Loading Bootstrap --> 
    <link href="css/vendor/bootstrap.min.css" rel="stylesheet"> 
    <!-- Loading Flat UI --> 
    <link href="css/flat-ui.css" rel="stylesheet"> 
     <link href="css/style.css" rel="stylesheet"> 
     <link href="config.json" rel="stylesheet"> 
     <link href="css/animate.css" rel="stylesheet"> 
    <!--<link rel="shortcut icon" href="img/favicon.ico" --> 

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. --> 
    <!--[if lt IE 9]> 
     <script src="js/vendor/html5shiv.js"></script> 
     <script src="js/vendor/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body> 
    <!--WZ-REKLAMA-1.0IZ--><div align="center"><table width="496" border="0" 
cellspacing="0" cellpadding="0"><tr><td><a href="http://www.webzdarma.cz/"><img 
src="http://i.wz.cz/banner/nudle03.gif" width="28" height="60" 
style="margin: 0; padding: 0; border-width: 0" alt="WebZdarma.cz" /></a></td><td> 
<noscript><div><a href='http://ad.wz.cz/openx/www/delivery/ck.php?n=a5977468&amp;cb=123'><img src='http://ad.wz.cz/openx/www/delivery/avw.php?zoneid=26&amp;cb=123&amp;n=a5977468' style='margin: 0; padding: 0; border-width: 0' alt='' /></a></div></noscript> 
</td></tr></table></div> 
<!--WZ-REKLAMA-1.0IK--> 

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">navigace</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
       <a class="navbar-brand" href="index.html"><img src="img/logo.png"></a> 
      </div> 
      <div class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a class="nav-link" href="#home" data-loc="domu">DOMŮ</a></li> 
        <li><a class="nav-link current" href="#ome" data-loc="about">O MĚ</a></li> 
        <li><a class="nav-link center-block" href="#galerie" data-loc="galerie">GALERIE</a></li> 
        <li><a class="nav-link" href="#kontakt" data-loc="kontakt">KONTAKT</a></li> 
       </ul> 
      </div> 
      </div> 
     </nav> 



     <div class="fullscreen background parallax-window scroll-panel" data-parallax="scroll" data-image-src="img/pozadi/08.jpg" data-img-width="1920" data-img-height="1080" id="home"> 
    <div class="content-a"> 
     <div class="content-b"> 
      <div class="container"> 
       <h2 class="text-center welcome" ><span class="jmeno"><b>MARTIN MIČULKA</b></span></h2> 
     </div> 
     </div> 
    </div> 
     </div> 

     <!--========================ABOUT========================================--> 
     <section class="scroll-panel" id="ome"> 
     <div class="container"> 
     <h1 class="text-center" id="nadpisOme">O MĚ</h1> 
      <div class="col-md-12"> 
       <p class="popis wow bounceInUp">Jmenuji se Martin Mičulka, je mi 18 let a jsem student 4 ročníku MěSOŠ Klobouky u Brna, zaměření na Informační technologie. Bydlím v Kyjově a mezi moje záliby patří, hudba, fitness a pc.</p> 
      </div> 
      <div class="col-md-4 text-center" id="kolecka"> 
       <img class="img-circle wow fadeIn obrazKolecka" src="img/student.png"> 
       <p class="muted wow bounce" id="textPodKoleckama"><b>Ochota učit se novým věcem</b><br>Nebráním se ani dalším programovacím jazykům abych rozšířil své zkušenosti a dovednosti.</p>   
      </div> 
      <div class="col-md-4 text-center" id="kolecka"> 
       <img class="img-circle wow fadeIn obrazKolecka" src="img/responsive.png"> 
       <p class="muted wow bounce" id="textPodKoleckama"><b>Přízpůsobivý</b><br>Přizpůsobím se Vašim požadavkům a budu se snažit udělat práci přesně podle Vašich představ.</p> 
      </div> 
      <div class="col-md-4 text-center" id="kolecka"> 
       <img class="img-circle wow fadeIn obrazKolecka" src="img/calendar.png"> 
       <p class="muted wow bounce" id="textPodKoleckama"><b>Rychlý</b><br>Svoji práci se snažím dělat rychle a v co nejkratším možném termínu.</p> 
      </div> 
     </div> 
     </section> 

     <!--=====================================GALERIE=============================--> 
     <section class="scroll-panel text-center" id="galerie"> 
     <div class="jumbotron" style="color: white;background-color: #16a085;height: 800px;"> 
     <div class="container"> 
      <h1 class="text-center" style="padding-top:60px;">GALERIE</h1> 

      <!--=============OBRAZEK1============--> 
     <div class="col-md-4"> 
      <div class="tilt"> 
     <a href="http://www.odsnl.cz/"><img class="img-square wow fadeInUp obrazGalerie" src="img/galerie/galerie.jpg"></a> 
      </div> 
     </div> 


       <!--=============OBRAZEK2============--> 
     <div class="col-md-4"> 
      <div class="tilt"> 
     <a href="http://www.martinmiculka.wz.cz"><img class="img-square wow fadeInUp tilt obrazGalerie" src="img/galerie/galerie2.jpg"></a> 
     </div> 
      </div> 



     <div class="col-md-4"> 
     <div class="tilt"> 
     <a href="http://www.sosklobouky.cz/DIKYPR/index.html"><img class="img-square wow fadeInUp obrazGalerie" src="img/galerie/galerie3.jpg"></a> 
    </div> 
      </div> 

      <!-- 

     <div class="col-md-4"> 
      <div class="tilt"> 
     <a href="#"> <img class="img-square wow fadeInUp" height="300px" width="300px" style="margin-top: 40px;background-color:#34495e;margin-bottom: 40px;"></a> 
     </div> 
      </div> 



     <div class="col-md-4"> 
      <div class="tilt"> 
     <a href="#"><img class="img-square wow fadeInUp" height="300px" width="300px" style="margin-top: 40px;background-color:#34495e;margin-bottom: 40px;"></a> 
     </div> 
     </div> 



     <div class="col-md-4"> 
      <div class="tilt"> 
     <a href="#"><img class="img-square wow fadeInUp" height="300px" width="300px" style="margin-top: 40px;background-color:#34495e;margin-bottom: 40px;"></a> 
     </div> 
    </div> 
     </div> 
     </div>--> 
      </div> 
      </div> 
</section> 

<!--================================KONTAKTY===========================--> 
     <section class="scroll-panel" id="kontakt"> 
      <div class="container"> 
      <h1 class="text-center" style="padding-top:60px;">KONTAKT</h1> 
       <div class="col-md-12"> 
     <img src="img/iphone.png" class="center-block wow zoomIn obrazIphone" style="padding-top: 40px;"> 
        <a href="#home"><button type="button" class="btn btn-inverse btn-lg pull-right sipkaNahoru"><span class="fui-triangle-up"></span></button></a> 
      </div> 
      </div> 
     </section> 

     <footer id="footer"> 
      <div class="container"> 
      <p class="text-center" style="font-size: 18px;">© Martin Mičulka, Kyjov, 2015</p> 
      </div> 

     </footer> 

    <!-- jQuery (necessary for Flat UI's JavaScript plugins) --> 
    <script src="js/vendor/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/flat-ui.min.js"></script> 
    <script src="js/bootstrap.js"></script> 
    <script src="js/fullbg.js"></script> 
     <script src="js/jquery.scrollTo.js"></script> 
     <script> 
     $(document).ready(function(){ 
    $('a[href^="#"]').on('click',function (e) { 
     e.preventDefault(); 

     var target = this.hash; 
     $target = $(target); 

     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top 
     }, 900, 'swing', function() { 
      window.location.hash = target; 
     }); 
    }); 
}); 
     </script> 
     <script src="js/parallax.min.js"></script> 
     <script src="js/wow.min.js"></script> 
     <script> 
new WOW().init(); 
</script> 
      <script type='text/javascript'><!--//<![CDATA[ 
    var m3_u = (location.protocol=='https:'?'https':'http')+'://ad.wz.cz/openx/www/delivery/ajs.php'; 
    var m3_r = Math.floor(Math.random()*99999999999); 
    if (!document.MAX_used) document.MAX_used = ','; 
    document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u); 
    document.write ("?zoneid=26"); 
    document.write ('&amp;cb=' + m3_r); 
    if (document.MAX_used != ',') document.write ("&amp;exclude=" + document.MAX_used); 
    document.write (document.charset ? '&amp;charset='+document.charset : (document.characterSet ? '&amp;charset='+document.characterSet : '')); 
    document.write ("&amp;loc=" + escape(window.location)); 
    if (document.referrer) document.write ("&amp;referer=" + escape(document.referrer)); 
    if (document.context) document.write ("&context=" + escape(document.context)); 
    if (document.mmm_fo) document.write ("&amp;mmm_fo=1"); 
    document.write ("'><\/scr"+"ipt>"); 
//]]>--></script> 
    </body> 
</html> 

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); 

body{ 
font-family: 'Open Sans', sans-serif; 
    overflow-x: hidden; 
} 


.navbar-default{ 
    min-height: 100px; 
} 

.obrazGalerie{ 
margin-top: 100px; 
} 

/*TILT*/ 
.tilt { 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
     -o-transition: all 0.5s ease; 
     -ms-transition: all 0.5s ease; 
      transition: all 0.5s ease; 
} 

.tilt:hover { 
    -webkit-transform: rotate(-10deg); 
    -moz-transform: rotate(-10deg); 
     -o-transform: rotate(-10deg); 
     -ms-transform: rotate(-10deg); 
      transform: rotate(-10deg); 
} 

.parallax-window { 
    min-height: 200px; 
    background: transparent; 
    text-align: center; 
} 

#textPodKoleckama{ 
    text-align: center; 
    padding-top: 30px; 
    margin-bottom: 60px; 
} 

#kolecka{ 
    padding-top: 60px; 
} 

.popis{ 
font-size: 28px; 
    padding-top: 30px; 
    text-align: center; 
} 

#footer { 
height: 60px; 
background-color:#7f8c8d; 
margin-top: 50px; 
padding-top: 20px; 
padding-bottom: 20px; 
    color: white; 
    font-weight: 700; 
    } 

#nadpisOme{ 
    padding-top: 100px; 
    font-size: 75px; 
} 

#about{ 
    padding-top: 30px; 
    font-size: 28px; 
    text-align: center; 
} 



.navbar-brand { 
    list-style-type: none; 
    margin: .7em; 
    padding: .5em; 
} 

.navbar-toggle { 
    margin: 1em; 
    padding: .5em; 
} 

.welcome { 
    color: white; 
    font-size: 72px; 
} 

.jmeno { 
    display: inline-block; 
    border: white solid 10px; 
    padding: 0.5em; 
} 

$flex-legacy-enabled: true; 

li { 
    text-align: center; 
    vertical-align: middle; 
    display: inline-block; 
    @include display-flex(inline-flex); 
    /* vertical centering for legacy, horizontal centering for modern */ 
    @include justify-content(center); 
    /* modern Flexbox only */ 
    @include align-items(center, $legacy: false); 
    /* legacy Flexbox only */ 
    @include legacy-flex-direction(column); 
} 

/* pretty it up! */ 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: .5em; 
} 

li { 
    margin: .5em; 
    padding: .5em; 
} 


/* background setup */ 
.background { 
    background-repeat:no-repeat; 
    /* custom background-position */ 
    background-position:50% 50%; 
    /* ie8- graceful degradation */ 
    background-position:50% 50%9 !important; 
} 

/* fullscreen setup */ 
html, body { 
    /* give this to all tags from html to .fullscreen */ 
    height:100%; 
} 
.fullscreen, 
.content-a { 
    width:100%; 
    min-height:100%; 
} 
.not-fullscreen, 
.not-fullscreen .content-a, 
.fullscreen.not-overflow, 
.fullscreen.not-overflow .content-a { 
    height:100%; 
    overflow:hidden; 
} 

/* content centering styles */ 
.content-a { 
    display:table; 
} 
.content-b { 
    display:table-cell; 
    position:relative; 
    vertical-align:middle; 
    text-align:center; 
} 

@media (max-width: 767px) { 
    .fotka { 
     margin-top: 60px; 
    } 
.welcome { 
     font-size: 22px; 
    } 
     .obrazGalerie{ 
    height: 150px; 
    width: 150px; 
    margin-top: 30px; 
    } 

.obrazKolecka{ 
height: 150px; 
width: 150px; 
} 
    .popis { 
    font-size: 20px !important; 
    } 
.obrazIphone{ 
height: 290px; 
    width: 154px; 
}  

    h1{ 
    font-size: 50px !important; 
    } 

    } 

Live网站是:http://www.martinmiculka.wz.cz

+1

在Chrome版本39.0.2171.95 m &&版本41.0.2270.0 canary && Firefox 34.0.5上正常运行。在IE11也是罚款.. – robjez

+0

野生动物园iPhone 5坏了,http://imgur.com/qPXmgZ1 – FallenCZ

+0

它不加载我的Android手机。 Kindle Fire也一样。你需要调试它的队友,恐怕 – robjez

回答

0

OK家伙,懂了工作,主持我有我的网站上已经得到了广告我的导航栏下,并导致该空白!

http://martinmiculka.mzf.cz/

,你可以看到,我转到我的网站到另一个主机,它的广告是在页面的底部,其唯一的文本。