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>