Squarespace Code Block Alignment Probleme

Question

Wir haben benutzerdefinierte codierte animierte Flipping-Karten auf unserer Website. Es gibt ein Problem mit der Ausrichtung und Größenanpassung von ihnen. Das Problem tritt nur auf, wenn sich mehrere Karten auf der Seite befinden (sie werden mithilfe von Codeblöcken erstellt). Sie können das Problem auf dem folgenden Link sehen.

Jede Hilfe wäre willkommen!

LINK TO SITE

JSFIDDLE (NUR 1 CARD ... AUSGABE nicht erscheint)

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

Dies scheint zu sein, weil Sie verschachtelte Blöcke haben. Das heißt, jeder Codeblock() ist innerhalb des vorherigen verschachtelt, so dass jedes Bild etwas gepolter ist als das vorherige.

Siehe das angehängte Bild. Nested Squarespace Code Blocks - Dev. Tools Screenshot

Ich bin mir nicht sicher, wie dieses Problem erstellt wurde. Haben Sie Code kopiert und eingefügt, der sqs-block code-block sqs-block-code Elemente enthält? Es scheint, dass du es getan hast, zumindest auf den ersten Blick.

Um dies zu beheben, müssen Sie alle Squarespace-spezifischen divs entfernen, die jedes Ihrer flip-container Divs umschließen. Innerhalb des Codeblocks sollten Sie nur nacheinander eine Reihe von flip-container divs haben. So:

<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>