Jump to content

Rebel

Circle Member
  • Posts

    4
  • Joined

  • Last visited

Everything posted by Rebel

  1. Site URL: https://changing-cocoons.squarespace.com/home Hey All, Got a user who really liked the Supply template and so we've been building out the site on that. However we're starting to get to the point where we are optimising the experience for mobile/tablet and I've noticed that when on mobile the nav turns into a burger menu (great, love that) but it still lives in a side bar on the side of the screen. This would be fine but it pushes all content to the right and on some of the pages it means you end up having to scroll horizontally to see all the content. You can see this most apparent on the Shop Page but it does crop up on some others as well. Ideally I'd move the nav bar so it's at the top of the screen instead of being in a side bar but as of yet I've been unable to get that to work. Was wondering if anyone here would be able to help! Website Link: https://changing-cocoons.squarespace.com/home
  2. 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; } }
  3. 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.
×
×
  • 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.