Recent Change Breaking sqs-col Implementations

Site URL: https://www.gjameselectrical.com.au/home

Recently had a client come back to me saying that their home page doesn't display properly. I set up some hoverable action boxes to display 6 tiles with 3 on each row.

Something has changed and now this code and it's variations don't seem to work anywhere. Not sure what's caused the interaction but was hoping someone here might have some insight on the issue.

Have popped the HTML and CSS below

HTML:

<div class="homeActionBox row no-gutters">

<div class="sqs-col sqs-col-4" onclick="location.href='/new-builds';">
	<div class="item" style="background-image: url('https://static1.squarespace.com/static/5f41aa2277426c4e4bf794b7/t/5f41bd25381f2c334d3a6d80/1598143787607/gjames-electrical-mackay-new-builds.jpg');">
		<img src="http://placehold.it/100x60" style="visibility: hidden">
		<div class="text">
    		New<br><span>Builds</span>
    	</div>
	</div>
</div>

<div class="sqs-col sqs-col-4" onclick="location.href='/general-electrical';">
	<div class="item centerText">
	<img src="http://placehold.it/100x60" style="visibility: hidden">
	<figure style="background-image: url('https://static1.squarespace.com/static/5f41aa2277426c4e4bf794b7/t/5f41bd189cd6131f92aa6d9f/1598143768444/electrical-icon.png');">
	<img src="http://placehold.it/60x60" style="visibility: hidden">
	</figure>
		<div class="text">
			GENERAL<br><span>ELECTRICAL</span>
    	</div>
	</div>
</div>


<div class="sqs-col sqs-col-4" onclick="location.href='/solar-panel-installations';">
	<div class="item" style="background-image: url('https://static1.squarespace.com/static/5f41aa2277426c4e4bf794b7/t/5f41bd2fa354d12015712792/1598143794983/gjames-electrical-mackay-solar-panels.jpg');">
		<img src="http://placehold.it/100x60" style="visibility: hidden">
		<div class="text">
			SOLAR PANEL<br><span>INSTALLATIONS</span>
		</div>
	</div>
</div>


<div class="sqs-col sqs-col-4" onclick="location.href='/test-and-tag';">
	<div class="item centerText">
		<img src="http://placehold.it/100x60" style="visibility: hidden">
		<figure style="background-image: url('https://static1.squarespace.com/static/5f41aa2277426c4e4bf794b7/t/5f41bd418938b12860294b39/1598143809553/tag-icon.png');">
			<img src="http://placehold.it/60x60" style="visibility: hidden">
		</figure>
		<div class="text">
			TEST<br><span>&amp; TAG</span>
		</div>
	</div>
</div>

<div class="sqs-col sqs-col-4" onclick="location.href='/air-conditioning-installations';">
	<div class="item" style="background-image: url('https://static1.squarespace.com/static/5f41aa2277426c4e4bf794b7/t/5f41bd1e61f8cf24f5b422c3/1598143775941/gjames-electrical-mackay-airconditioning-installations.jpg');">
		<img src="http://placehold.it/100x60" style="visibility: hidden">
		<div class="text blue">
			AIRCONDITIONING<br><span>INSTALLATIONS</span>
		</div>
	</div>
</div>


<div class="sqs-col sqs-col-4" onclick="location.href='/contact-us';">
	<div class="item centerText">
		<img src="http://placehold.it/100x60" style="visibility: hidden">
		<figure style="background-image: url('https://static1.squarespace.com/static/5f41aa2277426c4e4bf794b7/t/5f41bd3a3ce4e4729ad8e6b8/1598143802029/icon_contactUs.png');">
			<img src="http://placehold.it/60x60" style="visibility: hidden">
		</figure>
		<div class="text">
			Contact<br><span>Us</span>
		</div>
	</div>
</div>


</div>

CSS:

/* ----|///////////////////|---- */
/* ----|>HOME ACTION BOXES<|---- */
/* ----|///////////////////|---- */
#home-action-boxes{
  .Index-page-content {
    padding: 0px !important;
  }
}

.homeActionBox-no-gutters{
  margin: -30px 0 -30px 0 !important;
}

.homeActionBox .item {
  background-color: #951d20;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    text-transform: uppercase;
    font-size: 24px;
    position: relative;
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.homeActionBox .item.centerText:hover {
    filter: none;
}

.homeActionBox .item:hover {
    transform: scale(1.05);
    z-index: 10;
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
    cursor: pointer;
    background-color: #28306d;
}

.homeActionBox .item .text {
    position: absolute;
    bottom: 20px;
    left: 20px;
    line-height: 23px;
    font-weight: 100;
}

.homeActionBox .item figure {
    position: absolute;
    top: 50%;
    background-size: contain;
    background-repeat: no-repeat;
      margin: 0px;
    left: 21px;
    width: 28%;
      transform: translate(0%,-50%);
    -ms-transform: translate(0%,-50%);
    -webkit-transform: translate(0%,-50%);
}

.homeActionBox .item.centerText .text {
    top: 50%;
    left: 50%;
    transform: translate(-20%,-35%);
    -ms-transform: translate(-20%,-35%);
    -webkit-transform: translate(-20%,-35%);
}

.homeActionBox .item .text.blue {
    color: #28306d;
}

.homeActionBox .item .text > span {
    font-weight: 700;    
}

.homeActionBox .item img {
  width: 100%;
}

@media (min-width: 1200px) {
    .homeActionBox .item {font-size: 30px;}
    .homeActionBox .item .text {line-height: 28px;}
}

Any help would be greatly appreciated!

Edit: have attached an image showing how the site used to look. Sorry for the crop/poor quality but I got this by zooming into the SS thumbnail on my dashboard.

Were there only three elements (builds, general electric, solar panel installations) originally?

If so, someone has added elements without regard for adding a new row.

SS uses a 12 column grid and this exceeds that. When I removed the last three columns that didn't resolve the issue completely. There was still a height issue going on.

Hopefully that points you in the right direction.

I always just assumed once it reached the 12 it started a new row which is what seems to happening. As for the issue I ended up fixing it. It seems Squarespace has made some changes that cleared the default image height so I just had to add this to my CSS. Using different heights based on screen width (for different devices). Thanks anyway!

#home-action-boxes{
  .Index-page{
    height: 500px;
  }
}

Quote

I always just assumed once it reached the 12 it started a new row which is what seems to happening.

Not when you add the cols manually. It may work in practice currently but you can't depend it that continuing to work. It's not like SS is automagically adding rows for you with manual code.

In the SS interface they don't allow more than 12 cols wide.

@Rebel Just want to say some problems on your site, if you need to fix, you can reply here.

Site URL: https://www.gjameselectrical.com.au/

1. (Desktop) Move G James… position to left or bottom?

2. (Mobile-Home) Remove white space here?

3. (Tablet-Home) Increase boxes section width?

4. (Tablet-Air Condition) Increase content width to prevent overlap?