AdamBlyth

Hi @tuanphan I have used the below code and my images in my shop are displaying in the correct aspect ratio on desktop. However on mobile, the shop front page displays the images correctly (image 1), but when I click into the product page the image is no longer the correct aspect ratio when the image is vertical (image 2). // Change aspect ratio of images // .products.collection-content-wrapper .grid-item .grid-image-cover { object-fit: contain !important; } Link with correct aspect ratios: https://www.adamblyth.com.au/prints Link with incorrect aspect ratio on mobile for vertical image: https://www.adamblyth.com.au/prints/p/style-01-ej5na-5k3ns-dkm3h

Code isn't applied globally, I've added the following code via Page Header Code Injection for https://www.adamblyth.com.au/prints // Reduce size of variant dropdown & centre // <style> .product-variants { width: 40% !important; margin: 0 auto; text-align: center !important; } </style> But that code is also impacting: https://www.adamblyth.com.au/prints/p/style-01-ej5na-5k3ns-n9fkm which is causing the variant field to also centre on that page.

I have some code to reduce the size and centre the Add To Cart button and product variant field on the shop front page. Works exactly as I'd like: https://www.adamblyth.com.au/prints However when I click into a product to view further details, the product variant field is also centred - I want this to stay left aligned for all products. https://www.adamblyth.com.au/prints/p/style-01-ej5na-5k3ns-n9fkm

Hi @tuanphan I want to do the same thing, remove breadcrumbs from one shop but not another. Shop I do want to remove breadcrumbs: https://www.adamblyth.com.au/2025-calendar/p/style-01-ej5na-xd9rg password: testtest I tried a modified version of the above code, added the tag 'calendar' to the product in this shop, but breadcrumb is still visible // Hide breadcrumb nav (have to add tag 'calendar' to product) // .tag-calendar .ProductItem-nav { display: none; } Would also be great to remove some of the padding from this red circled section

I used the following code (add via Page Header Code Injection) to change the size and center-align the Add To Cart button // Reduce size of Add To Cart button & centre // <style> .sqs-add-to-cart-button { padding-top: 15px !important; padding-bottom: 15px !important; } .sqs-add-to-cart-button-wrapper { margin: 0 auto; text-align: center !important; } </style> Works well here: https://www.adamblyth.com.au/2025-calendar password: testtest However, when I click on the image to see more details of the product, the Add To Cart button is also centre aligned. I'd like that button to remain left aligned: https://www.adamblyth.com.au/2025-calendar/p/style-01-ej5na-xd9rg

Thank you - that worked for adding the Lightbox descriptions. A slight issue is sometimes when I first click on an image and the lightbox opens, there is no caption unless I click away from the image, like I have to activate the caption on click and then it appears on all images as I use the Lightbox controls as I click through each image. https://sepia-koala-36ck.squarespace.com/gallery

Thanks for this but it doesn't appear to work on my site, any assistance greatly appreciated. https://sepia-koala-36ck.squarespace.com/gallery

Yep I tried that too and it didn't work unfortunately, thanks anyway. This solution worked however: https://github.com/tomsWebConsulting/twcsl/tree/main/v7.1/Section/Gallery/Gallery Section Image Order Random#gallery-section-image-order-random

This worked perfectly for my Gallery Page, thank you. @tuanphan how could I also randomise the images loaded on my homepage, which is a Slideshow : Simple section? Thanks in advance! https://sepia-koala-36ck.squarespace.com/

Thanks for the tip. I've got what I need now with a little tweaking. Under Styles > Forms > Effects > Hover & Focus, I selected 'Outline' (previously I had selected 'Accent'). This provided a white border around the field on focus. I then used the same code above to change that border to my desired colour and it worked: // change the contact form border colour and input field when active // .sqs-block-form .field-list .field input:focus, .field textarea:focus { outline: 2px solid #7CCCBD !important; }

https://sepia-koala-36ck.squarespace.com/contact Password: Sqs45d6tttt I'm trying to add a border on the fields when they are active, same as the newsletter fields in the footer. I've tried this but doesn't seem to stick (it works when I have the Custom CSS panel open, but when that's closed it does not (odd!) // change the contact form border colour and input field when active // .sqs-block-form .field-list .field input:focus, .field textarea:focus { outline: 2px solid #7CCCBD !important; } Thanks for any help 🙂