Toerag

9 minutes ago, creedon said:

Squarespace is constantly changing things. The very nature of using custom code means that at anytime it can break. Squarespace states that they do not support custom code and it is your responsibility to maintain it in working order.

Fair point  👍

Please provide the code in format I can copy! Thank you 🙂

On 3/8/2024 at 10:44 AM, tuanphan said:

This is LESS (a version of CSS), you can't place it to Code Injection, or wrap in style tag, it will be invalid and won't work

Hi Tuanphan, thank you - am I supposed to copy this code into custom CSS? It seems to be an image so I cannot copy.  I tried moving the </style> tag to above your initial code suggestion, and that seems to make no difference.

I'm sure this was fine when I set it up, so Squarespace must have changed things which is worrying - I fear Squarespace is going to break my website every 6 months.. is that common?

Hi Tuanphan,

No, the code above is my custom CSS not code injection - that's why it says <style> and contains css code.

Any other suggestions? I still can't make it work.. would moving it to the top help? My Custom css does say 'error in line 1' strangely, though the only code on line one is <style>

Thank you 😊

Hi Tuanphan, 

I tried that and it doesn't seem to be working. Here's my whole custom CSS file in case there is a format issue or conflict (it's at the bottom):

<style>
@media screen and (min-width: 768px) {
      .products.collection-content-wrapper .list-grid .grid-item *::-ms-backdrop, .products.collection-content-wrapper .list-grid .grid-item {
      box-sizing: border-box;
      float: left;
      margin: 1.5vw 1vw;
      width: calc(25% - 2 * 1.5vw);
  }
}

.ProductItem-gallery-slides-item{
  border: 1px solid black !important;
}
  .image-block-outer-wrapper {
    border: 1px solid #3d4531;
 }

/* Make list images clickable */
li.list-item {
    position: relative !important;
}
.list-item-content__button-container {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}

/* Home Towbar Fitting Carousel */
body#collection-62824da6e7f0424662cf9e30 {
li.list-item {
    position: relative !important;
}
.list-item-content__button-container {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}}
/* writing options disable links */
.user-items-list-item-container[data-section-id="628637a8e6ac343848004edc"] * {
    pointer-events: none;
}
</style>

Thank you again!

Just to be clear I want to remove the hyperlinks from the images and the text, as you can see if you click them there is no page to link to (so a few people have complained the links are broken, when they weren't actually supposed to be links..). 😊

Hi, 

I'm having a similar issue with summary blocks, they now link through to non-existent pages which I'm pretty sure they didn't when I set it up. I don't want these sections to be clickable, I just want them as content with no hyperlink but I can't see how to remove the link. I tried the code injection suggested here under 'page settings > advanced' but that doesn't work (I don't want to apply it site-wide just to specific pages).

https://www.kenttowbars.co.uk/socket-wiring-options

^ This page content is split into two columns/sections, but I don't want them to appear as hyperlinks just content. If there is a solution I will also need to apply it here (same problem): https://www.kenttowbars.co.uk/towbar-types

Thankyou for your time 👍

Also, is it correct you can't have a page as the top level of a category/folder? (Only a category slug that redirects to a page?)

If you see my main navigation, the first link is to a folder (https://ralop-srabwot.squarespace.com/towbars-folder/) but I want it to be a page (https://ralop-srabwot.squarespace.com/towbars). But I can't see if this is possible.

Thanks again.

Quote

Yes, I can change it - can you provide a better one? 🙂

The problem is it disappears on mobile view, the position is fine on desktop, similar position on mobile would be good.

Quote

Yes, I can change it - can you provide a better one? 🙂

https://ralop-srabwot.squarespace.com/shop/p/thule-wing-bar-edge-black

pwrd: pencil

(on the right below product description, fine on desktop but goes awol on mobile)

Thank you! :)

Site URL: http://ralop-srabwot.squarespace.com

Hi, I'm using code injection to move an accordian (in additional info) up to the buy button, the problem is it only shows on desktop not on mobile preview. Any ideas?

Code (sitewide code injection):

<!-- Move accordian up on product pages -->
<script>
(function(){
  var accordion = document.querySelector('.ProductItem-additional');
  var cartButton = document.querySelector('.sqs-add-to-cart-button-wrapper');                    
  
  if(accordion && cartButton) {
    // Remove accordion from current position.
    accordion.parentNode.removeChild(accordion);
    
    // Add accordion before the cart button.
    cartButton.before(accordion);
  }
})()
</script>

Muchas gracias 🙂