Gallery blocks : Carousel and Grid misbehaving!

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?

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?

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>

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

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

Fixed. I was doubling up on the following code by having it in CI and CSS🤦‍♀️

img.thumb-image.loaded {
width 100% !important;
height: 100% !important;
}