2015-01-01 4 views
-1

У меня есть этот сайт: www.indiespil.dkВыравнивание изображения на моем сайте

Маленькие картинки, включая текст alligns perefctly на любом компьютере, но нижние Alling плохо на смартфоны и планшеты - даже на Samsung Smart TV ,

Можете ли вы помочь мне исправить это?

Код:

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <title>IndieSpil.dk</title> 

    <!-- CSS --> 
    <link rel="stylesheet" href="css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="css/font-awesome.min.css" /> 
    <link rel="stylesheet" href="css/style.css" /> 

    <!-- Favicon --> 
    <link rel="icon" type="image/png" href="images/favicon.png"> 

    <!--[if lt IE 9]> 
     <script src="js/html5shiv.js"></script> 
     <script src="js/respond.js"></script> 
    <![endif]--> 

</head> 
<body> 

    <section id="home-page"> 
     <div class="container-fluid home-bg"> 
      <div class="row"> 
       <div class="col-md-12 text-center home-page"> 
        <div class="main-logo"> 
         <img src="images/logo.png" alt="" /></a> 
         <div class="container"> 
      <div class="row"> 
       <div class="col-md-12 text-center"> 
        <h1 class="about-title">LAUNCHING IN</h1> 
        </div> 
        <div class="container"> 
         <!-- COUNTDOWN -->  
         <div class="row"> 
          <div class="col-sm-12 tk-countdown"> 
           <div class="row"> 
           </div> 
          </div> 
         </div> 
         <!-- /COUNTDOWN --> 
        <div class="col-sm-12 social-shear text-center"> 
         <a href="https://www.facebook.com/indiespil"><i class="fa fa-facebook"></i></a> 
         <a href="https://www.twitter.com/indiespil"><i class="fa fa-twitter"></i></a> 
         <a href="https://plus.google.com/+IndiespilDk1/posts"><i class="fa fa-google-plus"></i></a> 
        </div><!-- /.social-shear --> 
       </div> 
      </div> 
     </div> 
    </section><!-- /#home-page --> 


       </div> 
      </div><!-- /.row --> 
     </div><!-- /.container --> 
    </section><!-- /#about-page --> 

    <section id="about-page"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-12 text-center"> 
        <h1 class="about-title">A Danish indie game store</h1> 
        <h2>For Danish Indie Gamers</h2> 
        <p>Cool features include</p> 
       </div> 
       <div class="col-md-3 col-sm-6 text-center service"> 
        <i class="fa fa-trophy"></i> 
        <h3 class="whiteTextOverride">Competitions</h3> 
        <p>Every week we'll have a featured game on sale. Be the fastest on the chosen level and win great prizes.</p> 
       </div> 
       <div class="col-md-3 col-sm-6 text-center service"> 
        <i class="fa fa-gamepad"></i> 
        <h3 class="whiteTextOverride">Game wallet</h3> 
        <p>One place for all your games. Simple.</p> 
       </div> 
       <div class="col-md-3 col-sm-6 text-center service"> 
        <i class="fa fa-circle-o"></i> 
        <h3 class="whiteTextOverride">Indie Coins</h3> 
        <p>Buy a game and get rewarded with Indie Coins. Spend your coins on new games. You can also find our easter eggs and get rewarded...</p> 
       </div> 
       <div class="col-md-3 col-sm-6 text-center service"> 
        <i class="fa fa-users"></i> 
        <h3 class="whiteTextOverride">Community</h3> 
        <p>We'll gather all Danish indie gamers in our cozy environment.</p> 
       </div> 
      </div><!-- /.row --> 
     </div><!-- /.container --> 
    </section><!-- /#service-page --> 


       </div> 
      </div><!-- /.row --> 
     </div><!-- /.container --> 
    </section><!-- /#about-page --> 

    <section id="service-page"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-12 text-center"> 
        <h1 class="service-title">Features</h1> 
        <h2>For developers</h2> 
        <p>Our goal is to remove every obstacle for you, making it easy to be a part of IndieSpil.dk</p> 
       </div> 
       <div class="col-md-3 col-sm-6 text-center service"> 
        <i class="fa fa-upload"></i> 
        <h3>Easy updates</h3> 
        <p>No need for you to spend time on updating your game - Send us a link, and we'll do the rest.</p> 
       </div> 
       <div class="col-md-3 col-sm-6 text-center service"> 
        <i class="fa fa-youtube-play"></i> 
        <h3>Reviews</h3> 
        <p>We make a video game review in Danish of every game on our store.</p> 
       </div> 
       <div class="col-md-3 col-sm-6 text-center service"> 
        <i class="fa fa-bar-chart-o"></i> 
        <h3>Sales stats</h3> 
        <p>Don't worry about finding and analyzing sales stats - We will report to you directly on the 1st of each month.</p> 
       </div> 
       <div class="col-md-3 col-sm-6 text-center service"> 
        <i class="fa fa-rocket"></i> 
        <h3>Marketing</h3> 
        <p>We will take care of marketing your game in Denmark - we will reach above 100.000 Danish gamers in an instant.</p> 
       </div> 
       <div class="col-md-3 col-sm-6 text-center service"> 
        <i class="fa fa-usd"></i> 
        <h3>Our budget</h3> 
        <p>Over 90% of our profit goes back to marketing your game</p> 
       </div> 
       <div class="col-md-3 col-sm-6 text-center service"> 
        <i class="fa fa-file-text-o"></i> 
        <h3>Contract</h3> 
        <p>Our contract is written for people, easy to understand, short and without anything hidden. Yet it's still written by a great lawyer.</p> 
       </div> 
       <div class="col-md-3 col-sm-6 text-center service"> 
        <i class="fa fa-check-square-o"></i> 
        <h3>Quality Assurance</h3> 
        <p>We only accept great games on our website. IndieSpil.dk will not be watered down by bad games. Make sure you fit in!</p> 
       </div> 
       <div class="col-md-3 col-sm-6 text-center service"> 
        <i class="fa fa-users"></i> 
        <h3>Our Community</h3> 
        <p>We will take care of our community's response to your game, you wont have to spend time reading comments or replying.</p> 
       </div> 
       <div class="col-md-3 col-sm-6 text-center service"> 
        <i class="fa fa-flag"></i> 
        <h3>Localizing</h3> 
        <p>In Denmark people prefer to play games in English. No need to change language, just because we're a Danish store.</p> 
       </div> 
       <div class="col-md-3 col-sm-6 text-center service"> 
        <i class="fa fa-comment-o"></i> 
        <h3>Translation</h3> 
        <p>We will take care of translating descriptions, tags and meta.</p> 
       </div> 
       <div class="col-md-3 col-sm-6 text-center service"> 
        <i class="fa fa-google"></i> 
        <h3>SEO & Adwords</h3> 
        <p>We have a SEO expert making SEO for our website, resulting in rank 1 on google. We spend a large amount of our profits on Adwords.</p> 
       </div> 
       <div class="col-md-3 col-sm-6 text-center service"> 
        <i class="fa fa-thumbs-o-up"></i> 
        <h3>Exposure</h3> 
        <p>Talk to us, and we might feature your game on the front page.</p> 
       </div> 
      </div><!-- /.row --> 
     </div><!-- /.container --> 
    </section><!-- /#service-page --> 


    <section id="about-page"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-12 text-center"> 
        <h1 class="about-title">About Us</h1> 
        <h2>The team</h2> 
        <p>We're a team of three Danish young entrepreneurs</p> 
       </div> 
       <div class="col-md-4 text-center member"> 
        <div class="member-img"> 
         <img src="images/01.jpg" alt="" /> 
         <div class="member-social"> 
          <a class="facebook-icon" href="https://www.facebook.com/michael.himmelstrup?fref=ts"><i class="fa fa-facebook"></i></a> 
          <a class="twitter-icon" href="https://dk.linkedin.com/in/michaelhimmelstrup"><i class="fa fa-linkedin"></i></a> 
         </div> 
        </div> 
        <h3>Michael Himmelstrup</h3> 
        <span>Graphics Designer</span> 
       </div> 
       <div class="col-md-4 text-center member"> 
        <div class="member-img"> 
         <img src="images/02.jpg" alt="" /> 
         <div class="member-social"> 
          <a class="facebook-icon" href="https://www.facebook.com/profile.php?id=100002489468218"><i class="fa fa-facebook"></i></a> 
          <a class="twitter-icon" href="https://dk.linkedin.com/pub/emil-kristensen/a5/3a3/b83"><i class="fa fa-linkedin"></i></a> 
         </div> 
        </div> 
        <h3>Emil Frølund</h3> 
        <span>Founder</span> 
       </div> 
       <div class="col-md-4 text-center member"> 
        <div class="member-img"> 
         <img src="images/03.jpg" alt="" /> 
         <div class="member-social"> 
          <a class="facebook-icon" href="https://www.facebook.com/Magmismo?fref=ts"><i class="fa fa-facebook"></i></a> 
          <a class="twitter-icon" href="http://dk.linkedin.com/in/christianagerup"><i class="fa fa-linkedin"></i></a> 
         </div> 
        </div> 
        <h3>Christian Agerup</h3> 
        <span>Web Developer</span> 
       </div> 
      </div><!-- /.row --> 
     </div><!-- /.container --> 
    </section><!-- /#about-page --> 

    <section id="contact-page"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <form id="main-contact-form" class="contact-form-area text-center" name="contact-form" method="post" action="sendemail.php"> 
         <h1 class="contact-title">Get in touch</h1> 
         <h2>Feel free to contact us</h2> 
         <p></p> 
         <div class="contact-form"> 
          <div class="col-sm-5 your-name col-sm-offset-1"> 
           <div class="form-group"> 
            <input type="text" name="name" required="required" class="form-control" placeholder="Enter your name..."> 
           </div> 
          </div> 
          <div class="col-sm-5 your-email"> 
           <div class="form-group"> 
            <input type="email" name="email" class="form-control" required="required" placeholder="Enter your email..."> 
           </div> 
          </div> 
          <div class="col-sm-10 your-message col-sm-offset-1"> 
           <div class="form-group"> 
            <textarea name="message" id="message" required="required" class="form-control" rows="10" placeholder="Enter your message..."></textarea> 
           </div> 
           <div class="form-group"> 
            <button type="submit" name="submit" class="btn btn-primary btn-lg submit-button" >Submit</button> 
           </div> 
          </div> 
         </div> 
        </form> 
       </div> 
      </div><!--/.row--> 
     </div><!-- /.container --> 
    </section><!-- /#contact-page --> 
     <section id="about-page"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-sm-12 social-shear text-center"> 
         <a href="https://www.facebook.com/indiespil"><i class="fa fa-facebook"></i></a> 
         <a href="https://www.twitter.com/indiespil"><i class="fa fa-twitter"></i></a> 
         <a href="https://plus.google.com/+IndiespilDk1/posts"><i class="fa fa-google-plus"></i></a> 
        </div><!-- /.social-shear --> 
       </div> 
      </div> 
     </div> 
    </section><!-- /#home-page --> 


    <!-- JS --> 
    <script type="text/javascript" src="js/jquery.min.js"></script><!-- jQuery --> 
    <script type="text/javascript" src="js/bootstrap.min.js"></script><!-- Bootstrap --> 
    <script type="text/javascript" src="js/countdown.js"></script><!-- Countdown --> 
    <script type="text/javascript" src="js/scripts.js"></script><!-- Scripts --> 

</body> 
</html> 

ответ

0

Рассогласование обусловлено высотой несогласованность в элементах сетки (некоторые элементы выше, чем другие, и будет выталкиваться вниз). Попробуйте установить минимальную высоту для элементов сетки.

Попробуйте добавить это в свой раздел «Свойства»:

.service { 
    margin-top: 10px; 
    min-height: 240px; // Highest element in your grid 
} 
+0

Я добавил его в файл CSS, это не сработало. Думал ли я, что я делаю это правильно? –

Смежные вопросы