Jump to content

Gallery blocks : Carousel and Grid misbehaving!

Recommended Posts

Site URL: https://www.chrometemple.com/broken

Hi friends,

Ok this site has had quite a bit of code injection and css applied, and bam, now slideshows and grids don't work n galleries- including instagram pull/feed. I made a demo page showing how the same gallery looks in all 4 standard styles: slideshow, carousel, grid and stack https://www.chrometemple.com/broken

Carousels are stretched, grids- only one pic comes in if I'm lucky.

Is this the Jenga effect- customise one thing, break another? Can it be saved?

T

@tuanphan You tha guru help me out pls?

Link to comment
  • Replies 5
  • Views 811
  • Created
  • Last Reply
1 hour ago, TDavy said:

Site URL: https://www.chrometemple.com/broken

Hi friends,

Ok this site has had quite a bit of code injection and css applied, and bam, now slideshows and grids don't work n galleries- including instagram pull/feed. I made a demo page showing how the same gallery looks in all 4 standard styles: slideshow, carousel, grid and stack https://www.chrometemple.com/broken

Carousels are stretched, grids- only one pic comes in if I'm lucky.

Is this the Jenga effect- customise one thing, break another? Can it be saved?

T

@tuanphan You tha guru help me out pls?

Which is the custom code that you have put into the site?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Hi @bangank36, thanks for replying.

There is code for quite a few things copied below, plus CSS for forms, etc. 
It was fine before I let an upwork developer in there last week to change the nav colour, add sticky 'get in touch' button, force the header on homepage into place so it sits on the image better 😱

Code injection:
<!-- Global site tag (gtag.js) - Google Analytics -->

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-147639969-1"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-147639969-1');
</script>
<script>
function hideBtn(){
  document.getElementById("getintouch").style.visibility="hidden";
}
</script>
<div id="getintouch"><p id="cv-contact-btn" onclick="hideBtn()"><i class="fa fa-times" aria-hidden="true"></i>
</p><a href="/contact">  Get In Touch </a> </div>
<style>
div#getintouch p {
    position: fixed;
    top: 12px;
    right: 149px;
    color: #000;
    font-size: 16px;
      cursor: pointer;
}

 nav.Header-nav.Header-nav--primary .Header-nav-inner span.Header-nav-item.Header-nav-item--folder:nth-child(1) {
    color: #f707dd;
}
 nav.Header-nav.Header-nav--primary .Header-nav-inner span.Header-nav-item.Header-nav-item--folder:nth-child(1):hover {
    color: #f707dd !important;
}
 nav.Header-nav.Header-nav--primary .Header-nav-inner span.Header-nav-item.Header-nav-item--folder:nth-child(2) {
    color: #00ff00;
}
 nav.Header-nav.Header-nav--primary .Header-nav-inner span.Header-nav-item.Header-nav-item--folder:nth-child(2):hover {
    color: #00ff00 !important;
}
 nav.Header-nav.Header-nav--primary .Header-nav-inner a.Header-nav-item:nth-child(3) {
    color: #ffff0d;
}
 nav.Header-nav.Header-nav--primary .Header-nav-inner a.Header-nav-item:nth-child(3):hover {
    color: #ffff0d;
}
  input:focus {
    background: #fff !important;
    color: #000 !important;
    font-size: 16px;
    outline: none;
    
}
img.thumb-image.loaded {
    width: 100% !important;
    height: 100% !important;
}
  .enable-load-effects .Index-page-image{ opacity: 1;}
 .Index-page-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

  #quote .row.sqs-row {
    padding-top: 6%;
}
  #feature .fp-tableCell {
    text-align: center;
    margin: auto;
    padding-top: 7%;

  
.form-wrapper .field-list .field .field-element {
    color: #fff;
}
  @media (max-width:767px){
    div#getintouch p {
    position: fixed;
    top: 7px;
    right: 123px;
}
  .Index-page-content {
    padding-top: 3%;
}
    .Mobile-overlay-menu-main {
    padding-top: 80px;
}
    section#video {
    min-height: calc(80vh - 83px) !important;
}
    img.thumb-image.loaded {
    width: 100% !important;
    height: 100% !important;
}
 #getintouch a {
    padding: 5px 25px;
}
 #welcome-1 {
    min-height: calc(80vh - 83px) !important;
}
 }
</style>

Link to comment
1 hour ago, TDavy said:

Hi @bangank36, thanks for replying.

There is code for quite a few things copied below, plus CSS for forms, etc. 
It was fine before I let an upwork developer in there last week to change the nav colour, add sticky 'get in touch' button, force the header on homepage into place so it sits on the image better 😱

Code injection:
<!-- Global site tag (gtag.js) - Google Analytics -->

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-147639969-1"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-147639969-1');
</script>
<script>
function hideBtn(){
  document.getElementById("getintouch").style.visibility="hidden";
}
</script>
<div id="getintouch"><p id="cv-contact-btn" onclick="hideBtn()"><i class="fa fa-times" aria-hidden="true"></i>
</p><a href="/contact">  Get In Touch </a> </div>
<style>
div#getintouch p {
    position: fixed;
    top: 12px;
    right: 149px;
    color: #000;
    font-size: 16px;
      cursor: pointer;
}

 nav.Header-nav.Header-nav--primary .Header-nav-inner span.Header-nav-item.Header-nav-item--folder:nth-child(1) {
    color: #f707dd;
}
 nav.Header-nav.Header-nav--primary .Header-nav-inner span.Header-nav-item.Header-nav-item--folder:nth-child(1):hover {
    color: #f707dd !important;
}
 nav.Header-nav.Header-nav--primary .Header-nav-inner span.Header-nav-item.Header-nav-item--folder:nth-child(2) {
    color: #00ff00;
}
 nav.Header-nav.Header-nav--primary .Header-nav-inner span.Header-nav-item.Header-nav-item--folder:nth-child(2):hover {
    color: #00ff00 !important;
}
 nav.Header-nav.Header-nav--primary .Header-nav-inner a.Header-nav-item:nth-child(3) {
    color: #ffff0d;
}
 nav.Header-nav.Header-nav--primary .Header-nav-inner a.Header-nav-item:nth-child(3):hover {
    color: #ffff0d;
}
  input:focus {
    background: #fff !important;
    color: #000 !important;
    font-size: 16px;
    outline: none;
    
}
img.thumb-image.loaded {
    width: 100% !important;
    height: 100% !important;
}
  .enable-load-effects .Index-page-image{ opacity: 1;}
 .Index-page-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

  #quote .row.sqs-row {
    padding-top: 6%;
}
  #feature .fp-tableCell {
    text-align: center;
    margin: auto;
    padding-top: 7%;

  
.form-wrapper .field-list .field .field-element {
    color: #fff;
}
  @media (max-width:767px){
    div#getintouch p {
    position: fixed;
    top: 7px;
    right: 123px;
}
  .Index-page-content {
    padding-top: 3%;
}
    .Mobile-overlay-menu-main {
    padding-top: 80px;
}
    section#video {
    min-height: calc(80vh - 83px) !important;
}
    img.thumb-image.loaded {
    width: 100% !important;
    height: 100% !important;
}
 #getintouch a {
    padding: 5px 25px;
}
 #welcome-1 {
    min-height: calc(80vh - 83px) !important;
}
 }
</style>

let me try to remove them on the page to see if it the issue

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Thanks, here is the css too:

.phone-icon {
    background: url(https://static1.squarespace.com/static/5cc91bea80f4be000130d23e/t/5cf6bb42d2c12a0001ed8322/1559673667081/phone-arrow.png);
        background-repeat: repeat;
        background-size: auto;
    height: 14px;
    width: 16px;
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 0px 0;
    position: relative;
    top: 1px;
}
#yui_3_17_2_1_1561392643865_73 {
    margin: auto;
  
}
.Mobile-bar.Mobile-bar--bottom{ padding:0!important; }


//CSS FOR FLOATING  BUTTON
/*STYLES FOR FLOATING BUTTON (UPDATED)*/ #getintouch { position: fixed; top: 50%; right: 0; transform: rotate(90deg) translateX(50%); transform-origin: 100% 0; z-index: 99999; } #getintouch a { background: white; color: black; display: inline-block; font-size: 20px; font-weight: bold; text-transform: uppercase; font-family: din-condensed-web; padding: 12px 40px; }

@media only screen and (max-width: 740px){
  #getintouch { position: fixed; top: 60%; right: 0; transform: rotate(90deg) translateX(50%); transform-origin: 100% 0; z-index: 99999; } #getintouch a { background: white; color: black; display: inline-block; font-size: 18px; font-weight: bold; text-transform: uppercase; font-family: din-condensed-web; padding: 10px 40px; }
}
/*** NEWSLETTER FORM FIELDS ***/
.newsletter-form-field-element {
background: none !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: solid 3px #FFFFFF!important;
}
.form-wrapper
{background:#000000;
padding:20px;
border-style:solid;
border-width:1px;
border-color:#000000}

.form-wrapper .field-list .field .field-element 
{background:#000000;
border-style:none;}
.title
{font-family:din-condensed-web;
  text-transform:uppercase;
  font-size:16px;
  text-align:left;
  text-indent:20px;
color:#ffffff;}

.caption
{font-family:din-condensed-web;
  text-transform:uppercase;
  font-size:10px;
  text-align:left;
color:#ffffff;}

.form-wrapper .field-list .field .field-element 
{border:none;
border-bottom-style:solid;
border-bottom-width:2px;
border-color:#ffffff;}

.button.sqs-system-button.sqs-editable-button
{background:#f707dd;
font-family:din-condensed-web;
letter-spacing:3px;}
.sqs-block-content a, .sqs-block-content a:visited {border: none !important;}

.sqs-block-button .sqs-block-button-element--large {
   padding: 10px 25px !important;
   }

.sqs-block-horizontalrule hr {
width: 100%!important;
 background: #ffffff;
height: 1px!important;
}
.Footer { border-top: 1px solid #ffffff;}
p, h1, h2, h3 {hyphens: manual !important; -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; }

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.