HTML要素が私のローカルホストと同じ場所に配置されていません

Question

会社のウェブサイトのフロントエンドを開発していて、他のいくつかは動いています。私はカルーセルのためにmaterializecssライブラリを使用しています。カスタムスタイリングで若干の変更を加えて、私はこれを作りました： Localhost view

私はこのGithubをプルするようにプッシュしました。彼はドメインにそれを突っ込んだが、カルーセルはこのように見えた：Domain view。彼は自分のローカルホストでそれを実行し、同じ結果を受け取った。

セクションのHTML、SCSSとJS：

 


         
 
 
 

          
  
 
   
//Initialise 
 
$(document).ready(function() { 
 
    $('.modal-trigger').leanModal(); 
 
});
 
   
h3#portfolio-title { 
 
    font-family: 'Bungee Shade', cursive; 
 
    left: calc((100vw - 310px)/2); 
 
    position: absolute; 
 
    top: 50px; 
 
    @include header-underline($blackBg, 10px, 2px, solid); 
 
} 
 

 
.carousel { 
 
    height: 600px !important; 
 
} 
 
.carousel .carousel-item { 
 
    height: 400px; 
 
    width: auto !important; 
 
    position: absolute; 
 
    left: 0; 
 
} 
 
.carousel .carousel-item img { 
 
    height: 100%; 
 
    width: auto !important; 
 
    margin-top: calc((100vh - 450px)/2); 
 
} 
 
div.pf-option-btn { 
 
    padding-top: 20px; 
 
} 
 
div.webs-content-wrapper { 
 
    margin-top: 200vh; 
 
} 
 
.lean-overlay { 
 
    z-index: -1 !important; 
 
}
 
   
<h3 id="portfolio-title">Portfolio</h3> 
 

 
<div id="webs-content" class="modal webs-content-wrapper"> 
 
    <div class="modal-content"> 
 
     <h4>Modal Header</h4> 
 
     <p>A bunch of text</p> 
 
    </div> 
 
    <div class="modal-footer"> 
 
     <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a> 
 
    </div> 
 
</div> 
 

 
<div class="pf-options-container container"> 
 
    <div class="carousel"> 
 
     <div class="carousel-item" class="center"> 
 
      <img src="../public/images/phone-ws.png" /> 
 
      <div class="pf-option-btn center"> 
 
       <button data-target="webs-content" class="btn waves-effect waves-light orange modal-trigger">View Websites</button> 
 
      </div> 
 
     </div> 
 
     <!-- carousel-item was an <a> but I changed it to <div> as a test - no impact --> 
 

 
     <a class="carousel-item" class="center"><img src="../public/images/laptop-code.png" /> 
 

 
     </a> 
 

 
     <a class="carousel-item" class="center"><img src="../public/images/notepad-shapes-ws.png" /> 
 

 
     </a> 
 
    </div> 
 
</div>
 
  
         
 
 
 

 

私はGitHubのにプッシュされたものを確認するために、差分チェッカーを使用するには、私は最後に持っていたものと同一であった、そしてそれはでした。これを修正する方法に関するすべての提案は高く評価されます。

Answer 1

あなたは同じブラウザのバージョンを使用していますか？

ブラウザのコンソールを確認してください。友だちのコンピュータにリクエストが見つからないことがあります。