2015-12-29 2 views
0

J'utilise actuellement la dernière version de bootstrap et j'ai créé une page de destination. Cependant, le bouton de succès n'est pas cliquable sur les ordinateurs portables et les ordinateurs de bureau 13inch/15inch, ce qui est bizarre.Bizarre problème CSS: Le bouton ne fonctionne pas dans les écrans 13inch/15inch

L'URL est here.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <meta name="description" content="Loot.es - First CSGO SMS Service in the World. We send out notifications of matches live to our users for major Counter Strike Global Offensive tournaments. "> 
     <meta name="author" content="nivekyo"> 
     <link rel="icon" href="img/favicon.ico"> 
     <title>Loot.es - CSGO SMS Service</title> 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" > 
     <link href="css/landing.css" rel="stylesheet" > 
    </head> 
    <body> 
     <div class="container"> 
      <h1 class="title">The notification we've all been waiting for.</h1> 
      <p class="lead" style="font-size: 1.2em;">Get notified when a team wins at all major Counter-Strike tournaments.</p> 
      <div class="left"><img class="bubble" src="img/speech.png"/></div> 
      <p class="join"><a class="btn btn-success btn-lg" role="button" href="https://steamcommunity.com/groups/lootes"><i class="fa fa-steam-square"></i> Join now, it's free.</a></p> 
     </div> 
     <footer class="footer"> 
      <div class="container"> 
       <p class="text-muted"> 
        <a href="../privacy">Privacy Policy</a> | <a href="https://twitter.com/nivekyo">@nivekyo</a> 
       </p> 
      </div> 
     </footer> 
    </body> 
</html> 

CSS:

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300); 
@media (min-width: 1200px) { 
    .container { 
     width: 560px; 
     padding-top: 200px; 
    } 
} 
html { 
    position: relative; 
    min-height: 100%; 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    padding-top: 50px; 
} 
.container { 
    text-align: center; 
} 
.title { 
    font-family: 'Open Sans Condensed', sans-serif; 
} 
.join { 
    padding-top: 30px; 
} 
a:hover { 
    text-decoration: none; 
} 
img.bubble { 
    padding-top: 20px; 
    width: auto; 
    height: 180px; 
} 
.left { 
    text-align: left; 
} 

Avec merci beaucoup!

+0

La question peut être Je l'ai résolu, je l'ai résolu, et je réponds: " –

+0

Oui, ça marche, à quoi fait référence le pied de page, le conteneur? Merci beaucoup – kev

+0

Le conteneur du bas de page, qui a le paragraphe.' :) ' –

Répondre

1

Il est pas à cause de 15" écran, mais il est à cause de la padding sur la footer et .container Solution:..

footer, footer .container {padding-top: 0;} 

Ajout du code ci-dessus landing.css œuvres