tuanphan

To make it clickable, add this CSS code
body.homepage { li.list-item { position: relative; } .list-item-content__button-container { position: static; } 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; } .list-item-content__button-container { position: static !important; transform: unset !important; } a.list-item-content__button.sqs-block-button-element:before { visibility: hidden; } .user-items-list-carousel__slide { pointer-events: initial !important; user-select: unset !important; } .user-items-list-carousel__gutter { cursor: pointer; }} To make text appear in middle of image, use this CSS
body.homepage { .list-item-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 999; width: 100%; text-align: center; } h2.list-item-content__title { max-width: 100% !important; } }  

Add to Settings > Developer Tools > Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('<a href="/store/streeter-flynn-vodka-750-ml" class="mobile-btn">Buy Oneline</a>').appendTo('div.Mobile-bar [data-nc-container="top-center"]'); }) </script> <style> div.Mobile-bar [data-nc-container="top-center"] { display: flex !important; } a.mobile-btn { background: #fff; color: #42708a !important; padding: 11px 9px !important; font-weight: 400; } </style>

Dreams
You can add to Dreams Page Header
<style> .section-background, .section-border { background-color: transparent !important; } section { background-color: #f1f !important; } </style> Thoughts
Add to Thoughts Page Header
<style> .section-background, .section-border { background-color: transparent !important; } section { background-color: red !important; } </style> About
Add to About Page Header
<style> .section-background, .section-border { background-color: transparent !important; } section { background-color: brown !important; } </style>  

Can you share site url? We can check easier

You can try this video
 

You can add this code to Design > Custom CSS to show 2 items/row on mobile
/* Product 2 columns mobile */ @media screen and (max-width:767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-column-gap: 10px; } }  

Use this
.header-title-logo { text-align: center; position: relative; right: -10px; }  

You can add this to Design > Custom CSS to improve a bit
a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element { padding-bottom: 10px !important; }  

Add to Design > Custom CSS
nav.header-nav-list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }  

Use this new code
/* Mobile Slideshow */ @media screen and (max-width:767px) { .user-items-list-item-container[data-section-id="648055bf377c007c12ed8344"] { ul { min-height: unset !important; } .desktop-arrows { display: flex !important; } .mobile-arrows { display: none !important; } } }  

Add to Design > Custom CSS
body.collection-649227fc70d8b7335c60dd98 .gallery-grid-item>div img { border-radius: 30px !important; }  

Add to Design > Custom CSS
@media screen and (min-width:992px) { div.header-title { display: none; } .header-actions-action.header-actions-action--cta { position: absolute; left: 0; } }  

Try this code, if it doesn't work, please share link to page where you have problem, we can check easier
/* Tag cloud word spacing */ ul.sqs-tagcloud * { margin-left: 10px; margin-right: 10px; }  

You can add this to Design > Custom CSS
/* Gallery strips 2 columns mobile */ @media (max-width: 576px) { .gallery-strips .gallery-strips-wrapper { columns: 2; column-gap: 0; height: auto!important; display: block!important; padding: 0 5px; } .gallery-strips-item-wrapper { height: auto!important; } .gallery-strips-item { position: relative!important; transform: none!important; width: 100%!important; display: block; padding: 5px!important; box-sizing: border-box; } .gallery-strips .gallery-strips-item img { height: 100%!important; width: 100%!important; } }  

Try adding this to Design > Custom CSS
/* related products */ .ProductItem-relatedProducts.ProductList.clear.sqs-pinterest-products-wrapper img { object-fit: contain !important; }  

Change your code to this new code
<style> header#header img { content:url("https://static1.squarespace.com/static/6297984c16b96d38a8a3db46/t/64946b887fe5ea59581ee0c6/1687448456951/_light.png") !important; } </style>  

Add to Design > Custom CSS
figure.ProductItem-gallery { float: none !important; margin: 0 auto; }  

Add to Design > Custom CSS
@media screen and (max-width:767px) { .header-menu-bg.theme-bg--primary { background-color: white !important; } .header-menu-nav { background-color: var(--menuOverlayBackgroundColor) !important; } body.header--menu-open .burger-inner>div { background-color: var(--menuOverlayBackgroundColor) !important; } }

When you add a section > Choose List

Then choose a random list on right box.
Then Edit Content > Choose Banner Slideshow

Add this code under
body.homepage.header--menu-open header#header svg.icon--cart { fill: black !important; } body.homepage.header--menu-open header#header .burger-inner>div { background-color: black !important; } body.homepage.header--menu-open header#header img { filter: invert(1); -webkit-filter: invert(1); }  

Add to Design > Custom CSS
/* Whatsapp */ footer.sections [href*="wa.me"] { background-image: url(https://i.ibb.co/xKZkYDB/whatsapp-icon.png) !important; background-position: center center; background-size: contain; background-repeat: no-repeat; } footer.sections [href*="wa.me"] svg { display: none; }  

Access Edit mode > pages > Main Navigation or Not Linked > Hover on a page name > You will see a gear icon appear on right > Click on it > Advanced > Paste code on right box

Because the font file url doesn't exist. Try checking url again

Keep your current layout (left nav - middle logo) then add this to Design > Custom CSS
/* Nav to right */ @media screen and (min-width:992px) { .header-title-nav-wrapper { flex: 1 0 100% !important; flex-direction: row-reverse; } .header-nav-wrapper { text-align: right; } .header-title-logo a { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 99999; } }  

Add to Design > Custom CSS
@media screen and (min-width:901px) { body#collection-6478e32232456077f8725e47 { #content figure { height: 100vh !important; } & { overflow: hidden; } img { top: 0 !important; } .content-fill, .image-inset { overflow: visible !important; height: 100% !important; padding-bottom: 150% !Important; } }}