jquery - Squarespace Code Block Alignment Issues -

-

we have custom coded animate flipping cards on our website. there issue alignment , sizing of them. issue occurs when there multiple cards on page (they made using code blocks). can see issue on link below.

any appreciated!

link site

jsfiddle (only 1 card...issue doesn't show up)

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

this appears occurring because have nested blocks. is, each code-block ( .code-block ) nested within previous one, each image more padded 1 before.

see attached image. nested squarespace code blocks - dev. tools screenshot

i'm not sure how problem created. did copy , paste code containing sqs-block code-block sqs-block-code elements? appears did, @ least @ first glance.

to fix this, you're going need remove of squarespace-specific divs wrap each of flip-container divs. within code block, should have series of flip-container divs, 1 after another. this:

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

Comments

Post a Comment

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

-
i trying work entity inside request method of spring boot application. entity in project , pom.xml has dependencies it. why error message?: org.hibernate.unknownentitytypeexception: unable locate persister: com.ric.bill.model.bs.par package com.ric.web; import java.util.concurrent.atomic.atomiclong; import javax.persistence.entitymanager; import javax.persistence.persistencecontext; import net.sf.ehcache.cachemanager; import net.sf.ehcache.management.cache; import net.sf.ehcache.management.cachestatistics; import org.hibernate.stat.statistics; import org.springframework.beans.factory.annotation.autowired; import org.springframework.boot.autoconfigure.domain.entityscan; import org.springframework.cache.annotation.enablecaching; import org.springframework.transaction.annotation.enabletransactionmanagement; import org.springframework.transaction.annotation.propagation; import org.springframework.transaction.annotation.transactional; import org.springframework.web.bind.annotati
Read more

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

-
i implementing go program uses bufio.scanner , bufio.writer have packaged code follows package main import ( "fmt" "player/command" "strings" ) func main() { //enter code here. read input stdin. print output stdout commands.scanner.scan() { //scan new line , send comand variable check command exist or not input := strings.split(strings.trim(commands.scanner.text(), " "), " ") command := input[0] if command == "" { fmt.printf("$ %s:", commands.pwd) continue } if !commands.commands[command] { commands.throwerror("cannot recognize input.") } else { commands.execute(command, input[1:], nil) } fmt.printf("$ %s:", commands.pwd) } } i using init.go file in main package follows package main import ( "flag" "player/sourc
Read more

c - double free or corruption (fasttop) -

-
this code reads null terminated string file (file containing null terminated strings & should provide index wanted string). error: *** error in `./main': double free or corruption (fasttop): 0x090a4a80 *** aborted code: char *tmp_realloc=null; char *sstring=null; int i=1; /*set file pointer point string*/ fseek(fh,index,seek_set); sstring=(char*)malloc(sizeof(char)); if(sstring == null) return null; tmp_realloc=sstring; while( (*(sstring+i-1)=(char)fgetc((file*)fh)) != 0x0 ) { /*reallocate more memory*/ tmp_realloc=(char*)realloc((char*)sstring,++i); /*if not same address copy old new & set old point new*/ if(tmp_realloc != sstring){ strcpy((char*)tmp_realloc,(char*)sstring); free(sstring); sstring=tmp_realloc; } } could tell me pointer causing issue (& reason) ? remove part /*if not same address copy old new & set old point new*/ if(tmp_realloc != sstring){ strc
Read more