Beyondspace

Sure, here is the code to hide the logo when you open the burger menu on desktop
@media only screen and (min-width: 768px) { .header--menu-open .header-title-logo { visibility: hidden; } }  

Do you mean something like this?

Try adding the following Custom Css
.products-list .grid-item .grid-image { border-radius: 40px; } Let me know how it works on your site

Try the following Custom Css code
.newsletter-block .newsletter-form-field-wrapper { min-width: unset; } My testing

This code makes the element outside  of the mobile view

Try adding the following code to fix it
@media only screen and (max-width: 767px) { .tweak-footer-layout-stacked .Footer-nav { margin-right: 0; } } Let me know how it goes 

You can try this code
.sqs-block-button-element--medium { border: 1px solid #515151 !important; transform: perspective(0p); color: #515151 !important; position: relative; } .sqs-block-button-element--medium:before { content: ""; position: absolute; display: flex; top: 0; right:0; bottom:0; left: 0; z-index:-1; background: #a97d6E; transform: scaleY(0); transform-origin: 50% 100%; transition: 0.4s; } .sqs-block-button-element--medium:hover { color:white !important; border: 1px solid #a97d6e !important; opacity: 1 !important; } .sqs-block-button-element--medium:hover:before { transform: scaleY(1); } Let me know how it works

I believe you are looking for a way to detect if the current page is in iframe or not. Paste this code into Footer injection and use the selector .sqs-in-frame to target your document and tweak it accordingly
<script> document.addEventListener('DOMContentLoaded', function() {     if (window !== window.parent && !document.body.classList.contains("sqs-edit-mode")) {         document.body.classList.add('sqs-in-iframe');     } }); </script>  

Do you mean reducing these space?

The space between these items basically is really small

I check that your image have the space around. So in sqs you see that there are much padding on them

Try the following Custom Css code
.sqs-svg-icon--wrapper:after { content: ''; display: block; width: 100%; height: 100%; opacity: 0; background-position: center center; background-size: cover; background-repeat: none; } .sections .sqs-svg-icon--wrapper:hover { background: none; } .sqs-svg-icon--wrapper:hover:after { opacity: 1; } .sqs-svg-icon--wrapper:hover .sqs-svg-icon--social { display: none; } /*instagram hover image url*/ .sqs-svg-icon--wrapper.instagram-unauth:after { background-image: url(https://plus.unsplash.com/premium_photo-1712935547661-4fe0b2de98bf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHx8); } /*linkedin hover image url*/ .sqs-svg-icon--wrapper.linkedin-unauth:after { background-image: url(https://plus.unsplash.com/premium_photo-1712935547661-4fe0b2de98bf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHx8); } /*redbubble hover image url*/ .sqs-svg-icon--wrapper[href*="redbubble"]:after { background-image: url(https://plus.unsplash.com/premium_photo-1712935547661-4fe0b2de98bf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHx8); } Change image URL on your own

Get the URL on the asset Library
1. File Details -> Right Click on image the copy image address


2. On your code block, use the img tag and add the URL with the one you copy from library asset
 

You can try the following Css Code
/*Border style for product detail*/ .product-details.ProductItem-details { --border-size: 2px; } .ProductItem .ProductItem-details h1.ProductItem-details-title { border: var(--border-size) solid; margin-bottom: 0; padding: 15px; } .ProductItem-details .ProductItem-details-checkout { border: var(--border-size) solid; } .ProductItem-details-excerpt { border-bottom: var(--border-size) solid; } .ProductItem-details-checkout > div{ padding-left: 15px; padding-right: 15px; box-sizing: border-box; } Let me know how it works on your site

Try replacing my previous code with the following one
#collection-65d4ca134ce2a875379c1be8 .header { --solidHeaderBackgroundColor: transparent !important; } #collection-65d4ca134ce2a875379c1be8 .header-title-logo a { position: relative; } #collection-65d4ca134ce2a875379c1be8 .header-title-logo a img { visibility: hidden; } #collection-65d4ca134ce2a875379c1be8 .header-title-logo a:after { content:''; display:block; width: 100%; height: 100%; background-image: url(https://plus.unsplash.com/premium_photo-1712325632272-b0cbb2a27db6?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHx8); background-position: center center; background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; left:0; }  

You can follow this topic
Before-After Slider Code HTML/CSS/JS - Coding and Customization - Squarespace Forum

This code causes that space.

You can change it or use the following CSS code to overwrite it
.ProductItem-details h1.ProductItem-details-title { margin-bottom: 0px; } Let me know how it works

You can try the following code
@media only screen and (min-wid:100px) { #itemPagination { position: fixed; background: red; bottom: 50px; width: 350px; padding: 0; background: transparent; display: flex; justify-content: space-around; } #page { z-index: 99999; } .pagination-title-wrapper { display: none; } .item-pagination-link{ margin: 0; } } Let me know how it works

Try adding to your footer code injection
<script src="https://cdn.jsdelivr.net/npm/appybee-widget"></script> <script> AppyBeeWidget.init({ companyAPIKey: 'f3a4a372f989b69e66e4bfb0a438b0b3', style: 'side', locale: 'nl' }); </script> <script> const btns = document.querySelectorAll('header a[href="/book-now"]'); if(btns.length) { btns.forEach(button => { button.onclick = function(e) { AppyBeeWidget.show(); return false; /*preventDefault*/ }; }) } </script> <button id="widget-button">Boek nu</button> on your above code can be removed

if it has only 2 summary blocks, i think we should select directly the one you want to apply style.
If you intend to have more than 2 ones and set style for 2 summary blocks and exclude the mentioned section, you can try the following Css code
.summary-v2-block.sqs-block-summary-v2:not(#block-yui_3_17_2_1_1710347334583_18027) .summary-block-setting-design-list .summary-item, .summary-v2-block.sqs-block-summary-v2:not(#block-yui_3_17_2_1_1710347334583_18027) .summary-item.positioned { padding-bottom: 50px !important; } .summary-v2-block.sqs-block-summary-v2:not(#block-yui_3_17_2_1_1710347334583_18027) .summary-content { position:relative; } .summary-v2-block.sqs-block-summary-v2:not(#block-yui_3_17_2_1_1710347334583_18027) .summary-title .summary-title-link::after { content: 'REGISTER HERE'; background-color: black; border-radius: 0px; display: block; padding: 13px 26px; font-size: .75rem; font-weight: 500; font-style: normal; line-height: normal; text-transform: uppercase; letter-spacing: 1px; color: white; background-color: black; border-color: white; border: 1px solid #ffffff!important; position: absolute; bottom: -60px; } .summary-v2-block.sqs-block-summary-v2:not(#block-yui_3_17_2_1_1710347334583_18027) .summary-title .summary-title-link:hover::after { opacity: .8; }  
Let me know how it works on your site

We can achieve this layout by using the image section (Simple style)

Note: Set Captions on
After that, we can use the CSS code:
.gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-grid-lightbox-link { background: #000; } .gallery-grid-item:hover .gallery-grid-lightbox-link img { opacity: 0.6; } .gallery-caption.gallery-caption-grid-simple { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0; } .gallery-grid-item:hover .gallery-caption-grid-simple { opacity: 1; transition: none; } .gallery-caption-content { text-align: center; color: #fff; } My testing

Let me know how it works

You can try the following css code
@media only screen and (max-width: 767px) { .header-display-desktop { display: none; } } @media only screen and (min-width: 768px) { .header-display-desktop { display: flex; } .header-display-mobile { display: none; } .header .header-title-nav-wrapper .header-nav { display: block; } .header-layout-nav-right .header-title{ flex: unset !important; } .header-burger { display: none } .header .header-announcement-bar-wrapper { padding-top: .1vw; padding-bottom: .1vw; padding-left: 3vw; padding-right: 3vw; } }  

For desktop view, you can try the following code
@media only screen and (min-width: 768px) { .gallery-masonry-item .gallery-caption-content { visibility: hidden; } .gallery-masonry-item:hover .gallery-caption-content { visibility: visible; } }  

I find thé following code make that navigation on the right disappear
 

You can try the following code to overwrite it
.header-nav-item.header-nav-item--collection a { opacity: 1; color: var(--solidHeaderNavigationColor); } Hope it can help

You can try add the following custom Css code
@media only screen and (max-width: 767px) { section[data-section-id="65b24e50b427163099b47c10"] .products.collection-content-wrapper .nested-category-children { padding-top: 0; } section[data-section-id="65b24e50b427163099b47c10"] .nested-category-title { padding-top: 10px; } }  

Try the following code for mobile view
/*Mobile arrange - meta data - image below*/ @media only screen and (max-width: 767px) { .blog-side-by-side .blog-item{ display: flex; flex-direction: column; } .blog-item-summary { order: 0; } } Let me know if it works properly on your site

Try
<script> // Check if the window is loaded window.onload = function() { if (window.self !== window.top) { return; } // Function to simulate clicking the next arrow function clickNext(arrow) { arrow.click(); } // Query all elements with the class for carousel next arrows var nextArrows = document.querySelectorAll(".summary-carousel-pager-next"); // Set auto-scrolling for each carousel nextArrows.forEach(function(arrow) { // Define a function to handle auto-scrolling for a specific carousel function autoScroll() { clickNext(arrow); setTimeout(autoScroll, 4000); // Set the next auto-scroll after 4 seconds } // Start the auto-scrolling for the current carousel autoScroll(); }); } </script> If you want all your summaries on your site to auto run, place this code in your site Footer injection. Otherwise place it into each Page code injection 

Selector the section lightbox is
eg
[data-lightbox-section-id="65eba2ee2952eb7dd0fc1ef9"] .gallery-lightbox-control-btn .gallery-lightbox-control-btn-icon svg * { stroke: white; stroke-width: 4px; }  

You can add to Home > Design > Custom Css
/*Display social icon for Ontario*/ section[data-section-id="617aeb94ea317421e526d6a0"] { .socialaccountlinks-v2-block { a { &:last-child { display: none; } &:nth-child(5) { display: none; } &:nth-child(4) { display: none; } } } } /*Display social icon for Alberta*/ section[data-section-id="617b0a9ccfc6cd38e68acb90"] { .socialaccountlinks-v2-block { a { &:first-child { display: none; } &:nth-child(2) { display: none; } &:nth-child(3) { display: none; } } } } Let me know if it works properly on your site
Support me by pressing 👍 if this useful for you