mportch

Fantastic thank you!

Excellent that did the trick thanks again!!

Try this code to Custom CSS box
/* Fix masonry image mobile */ @media screen and (max-width:767px) { .gallery-masonry .gallery-masonry-item[data-loaded] img { width: 100% !important; } }  

Use this CSS code
@media screen and (max-width:767px) { .ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control:after { width:4vw; height: 4vw; } }  

You can use this CSS code
/* white box behind arrows */ .gallery-fullscreen-slideshow-control-btn::before, .gallery-slideshow-control-btn::before { background-color: transparent !important; }  

Most likely no need for backend access on this one.
Add the following to Website > Website Tools > Custom CSS.
/* "project" pages restore spacer on mobile */ @media screen and ( max-width : 767px ) { #block-cb33a2ef4351969fa655, /* lost america */ #block-c0317767e7f711318800, /* desert modern */ #block-e677e4cca8e64e49342e, /* forgotten palms */ #block-04e8f55bbf850175112a, /* kalah */ x-twc-dummy-selector /* dummy selector so others above can all use , */ { display : unset; } } This is for v7.1 and specific to the poster's need.
What this code is doing is restoring the spacer blocks that are normally "removed" on mobile. As new "projects" are added or removed, the block ids need to be updated. To find the spacer block ids check out Heather Tovey's most excellent looking Squarespace ID Finder. Note the structure of the code, each block id ends with a comma ( not including the comment text ), except the last which uses a dummy selector.
x-twc-dummy-selector Make your changes above this line
Let us know how it goes.

Try this Custom CSS:
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-alignment-center .form-disclaimer-text { margin-top: 0px; } .form-disclaimer-text { display:none; }  

With Exhibitions try this CSS code
@media screen and (max-width:767px) { div#page-section-5eba3efced52bb11d9eb73fb .html-block { padding-top: 0px !important; padding-bottom: 0px !important; } div#page-section-5eba3efced52bb11d9eb73fb .html-block p:empty { display: none; } }  

Try CSS like this
@media screen and (max-width:767px) { .ProductItem .ProductItem-additional h4 { font-size: 18px !important; } }  

Use this CSS code
@media screen and (max-width:767px) { fieldset.name div.title * { font-size: 30px !important; } .form-wrapper .field-list .description.required { font-size: 30px !important; } button.button.sqs-system-button.sqs-editable-button { font-size: 40px !important; } }  

Add this to Website Tools (under Not Linked) > Custom CSS
@media screen and (min-width:992px) { button.cart-checkout-button { font-size: 30px !important; } }  

Copy all your code from Custom CSS panel, paste into word (edit: notepad) or something, save that so you can access it again.
Then remove all your code from Custom CSS panel, click Save, and refresh the page. 
Check to see if this resolves your issues. If yes, then your code is causing the issues. 

Thanks so much - the latter worked!

Sorry, since posting I've had to temp hide the page. I’ll get back and repost this in a month. Thanks.

Try adding to Settings > Advanced > Code Injection > Footer
<script> document.addEventListener('DOMContentLoaded', function() { const productGrid = document.querySelector('.gallery-masonry .gallery-masonry-wrapper'); if (productGrid) { var productItems = productGrid.querySelectorAll('figure'); for (var i = productItems.length; i >= 0; i--) { productGrid.appendChild(productItems[Math.random() * i | 0]); } } }); </script>  

Strange, this should do the job:
.gallery-fullscreen-slideshow[data-width="full"] { padding-top: 15px; }  

Add to Page Header
<style> p.gallery-caption-content { margin-top: 15px; font-size: 10px !important; letter-spacing: 1.75px !important; font-weight: 400; font-style: normal; text-transform: uppercase !important; } </style> What problem with link?

You can try adding to Home > Design > Custom css
@media only screen and (max-width: 767px) { .gallery-masonry-wrapper.gallery-masonry-list--ready { display: grid; grid-template-columns: 1fr; grid-gap: 20px; height: auto !important; } .gallery-masonry-item { position: relative !important; height: auto !important; width: 100% !important; transform: translate3d(0,0,0) !important; } .gallery-masonry-lightbox-link, .gallery-masonry-item-wrapper { height: auto !important; } .gallery-masonry-lightbox-link img { width: 100% !important; } } Support me by pressing 👍  or marking as solution if this useful for you
 

My testing

Common problem, the posting form asks for it, but that doesn't get posted, so you have to put it in twice.
Try this Custom CSS:
.gallery-lightbox-background { opacity: 1.0; } Let me know if that helps, and give me a thumbs up, thanks!

I agree these are ugly. We need the option to change colours and create something less intrusive. This should be base-standard with Squarespace and can't believe it's not on 7.1!

Although it doesn't seem to have changed ALL the fonts in the site?
Navigation and some links and product titles etc are still in the old font.

I agree these are ugly. We need the option to change colours and create something less intrusive. This should be base-standard with Squarespace and can't believe it's not on 7.1!

Hi,
 
I believe this template below is Squarespace only option in the customer receiving an email gift?
Does anyone know of a way to change the fonts or of any gift card plugins?
I'd like to use digital gift cards in my store but this template isn't very professional looking.
 
 

I agree these are ugly. We need the option to change colours and create something less intrusive. This should be base-standard with Squarespace and can't believe it's not on 7.1!