Squarespace代碼塊對齊問題

Question

我們在我們的網站上有自定義代碼動畫翻轉卡。它們的排列和大小存在一個問題。只有當頁面上有多張卡片時纔會出現問題（它們是使用代碼塊製作的）。您可以在下面的鏈接中看到問題。

任何幫助，將不勝感激！

LINK TO SITE

JSFIDDLE（只有1個CARD ......問題不顯示）

HTML：

<div class="flip-container" ontouchstart="this.classList.toggle('focus');"> 
    <div class="flipper"> 
    <div class="front-brian"> 
    </div> 
    <div class="back"> 
     <div class="centerize"> 
     <div class="socicon-style"> 
      <a href="imdb.com"> 
      <span class="socicon-imdb"> 
     </span> 
      </a> 
     </div> 
     <div class="back-title">Brian Perry</div> 
     <div class="role">CEO</div> 
     </div> 
    </div> 
    </div> 

CSS：

.back { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 

    background: #bd2d2c; 
} 







.flip-container { 
    -webkit-perspective: 1000; 
    -moz-perspective: 1000; 
    -o-perspective: 1000; 
    perspective: 1000; 


} 




.flip-container:hover .flipper, 
    .flip-container.hover .flipper { 
     -webkit-transform: rotateY(180deg); 
     -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
     transform: rotateY(180deg); 
    } 








.flip-container, .front-brian, .front-tony, .front-blaine, .front-alex, .front-eric, .front-sue, .front-tamara, .front-kenyon, .front-dom, .front-lt, .front-lindsey, .front-chris, .front-ethan, .back { 
    width:6000px; 
    min-height:100%; 
    max-width:100%; 
    max-height: 10000px; 
    height:0; 
    padding-bottom: 70%; 

} 

.flipper { 
    -webkit-transition: 0.6s; 
    -webkit-transform-style: preserve-3d; 

    -moz-transition: 0.6s; 
    -moz-transform-style: preserve-3d; 

    -o-transition: 0.6s; 
    -o-transform-style: preserve-3d; 

    transition: 0.6s; 
    transform-style: preserve-3d; 

    position: relative; 
} 

.front-brian, .front-tony, .front-blaine, .front-alex, .front-eric, .front-sue, .front-tamara, .front-kenyon, .front-dom, .front-lt, .front-lindsey, .front-chris, .front-ethan, .back { 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    backface-visibility: hidden; 

    position: absolute; 
    top: 0; 
    left: 100; 
} 







.front-brian{ 
    background: url(http://static1.squarespace.com/static/573e762945bf219b6da541d1/t/57a5d191e3df28ea3c3f9bfb/1470484886737/Brian+Headshots-29.jpg); 

    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 
} 


.back-title { 
    color: #fff; 
    font-size: 2em; 
    position: absolute; 
    top: 14%; 
    left: 0%; 
    right: 0%; 
    text-align: center; 
} 

.role { 
    color: #fff; 
    font-size: 1.5em; 
    position: absolute; 
    top: 30%; 
    left: 0%; 
    right: 0%; 
    text-align: center; 
} 

Answer 1

這似乎是發生是因爲你有嵌套塊。也就是說，每個代碼塊（.code-block）都嵌套在前一個代碼塊中，因此每個圖像都比前一個填充更多。

查看附件圖片。 Nested Squarespace Code Blocks - Dev. Tools Screenshot

我不確定這個問題是如何產生的。您是否複製並粘貼包含sqs-block code-block sqs-block-code元素的代碼？看起來你至少乍一眼就是這樣做的。

要解決這個問題，您需要刪除所有包裝您的flip-container divs的特定於Squarespace的div。在代碼塊中，您應該擁有的是一系列flip-container div，一個接一個。像這樣：

<div class="flip-container" ontouchstart="this.classList.toggle('focus');">etc</div> 
<div class="flip-container" ontouchstart="this.classList.toggle('focus');">etc</div> 
<div class="flip-container" ontouchstart="this.classList.toggle('focus');">etc</div> 
<div class="flip-container" ontouchstart="this.classList.toggle('focus');">etc</div>