Beyondspace

Try
.item-pagination-link:hover .item-pagination-icon svg { stroke: #e19d9d !important; } .item-pagination-link:hover .item-pagination-title { color: #e19d9d !important; } And the testing result after applying

Let me know how it works on your site
Press 👍 or mark this answer as solution to help another one too

Kindly remove the previous code and use the following one
.product-details .sqs-add-to-cart-button-wrapper { margin-bottom: 0 !important; width: 50%; float: left; } .product-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button { line-height: 1 !important; padding: 0.9rem 1.503rem !important; } .product-details .sqs-add-to-cart-button-wrapper + .button-block { padding: 0 !important; width: 50%; float: left; clear: unset !important; } .product-details .sqs-add-to-cart-button-wrapper + .button-block a { line-height: 1 !important; padding: 0.9rem 1.503rem !important; }  

You can try adding the !important

Try adding to Home > Design > Custom Css
@media only screen and (max-width: 767px) { #block-yui_3_17_2_1_1632971429863_33443 + .row .span-6 { width: 50% !important; float: left !important; } } Let me know how it works on your site
Support me by pressing 👍 if this useful for you
 
 

Try adding to Home > Design > Custom Css
@media only screen and (max-width: 767px) { #block-yui_3_17_2_1_1632971429863_33443 + .row .span-6 { width: 50% !important; float: left !important; } } Let me know how it works on your site
Support me by pressing 👍 if this useful for you
 
 

Try adding to Home > Design > Custom Css
@media only screen and (max-width: 767px) { #block-yui_3_17_2_1_1632971429863_33443 + .row .span-6 { width: 50% !important; float: left !important; } } Let me know how it works on your site
Support me by pressing 👍 if this useful for you
 
 

Try adding to Home > Settings > Advanced > Code injection, footer
<script> (function() { document.addEventListener('DOMContentLoaded',() => { document.querySelector('#collection-619679f0e67cea457538c10c .header-actions--right .header-actions-action--cta a').setAttribute('href','/home'); }) })() </script> Change the '/home' with the slug/url you want to redirect
Let me know how it works on your site
Press 👍 or mark this answer as solution to help another one too

Is it the result you want to achieve?

Try adding to Home > Design > Custom Css
section[data-section-id="619d177d0fa1af413146d5ec"] { .user-items-list-banner-slideshow__arrow-button { svg { display: none !important; } &:after { content: ''; position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; } } .user-items-list-banner-slideshow__arrow-button--right { &:after { background: url('https://api.iconify.design/ep/arrow-right.svg?color=%235d225a') no-repeat center center / contain; } } } .user-items-list-banner-slideshow__arrow-button--left { &:after { background: url('https://api.iconify.design/ep/arrow-right.svg?color=%235d225a&rotate=180deg') no-repeat center center / contain; } } Change the url background with your own arrow image
Let me know how it works on your site
Press 👍 or mark this answer as solution to help another one too

try
.tweak-blog-side-by-side-image-aspect-ratio-11-square .blog-side-by-side .image-wrapper { border-radius: 0px 150px 0px 50px; }

You can try adding to Home > Design > Custom Css
@media only screen and (max-width: 767px) { #block-yui_3_17_2_1_1580323223364_5509 p:last-child { line-height: unset; } } Let me know how it works on your site
Press 👍 or mark this answer as solution to help another one too

try
@media screen and (max-width: 575px) { .products.collection-content-wrapper .nested-category-children { display: block; } .products.collection-content-wrapper .nested-category-breadcrumb-list-item { display: block; text-align: left; } .products.collection-content-wrapper .breadcrumb-separator { display: none; } }

You can try
#block-yui_3_17_2_1_1637956624869_37515 + .row > .col > .button-block a { width: 100% !important; box-sizing: border-box; } Let me know how it works on your site

Hi @sts101,
You can try adding to Home > Design > Custom Css
.header-actions-action--cart svg.icon--cart { stroke: #fff !important; } .header-actions-action--cart .icon-cart-quantity { color: #fff !important; } Let me know how it works on your site
Press 👍 or mark this answer as solution to help another one too

You can try adding to Home > Design > Custom Css
@media only screen and (max-width: 767px) { section[data-section-id="612e5fd57525fe68f4e29ac6"] { height: 70vh; } #block-yui_3_17_2_1_1631440941209_3080 { top: -80px !important; } } Let me know how it works on your site
Press 👍 or mark this answer as solution to help another one too

Try adding to Home > Design > Custom Css
.sqs-lightbox-slideshow .overlay-description-visible { bottom: 0 !important; } Let me know how it works on your site
Press 👍 or mark this answer as solution to help another one too

For adding hovering effect for all link, you can try adding to Home > Design > Custom
a:hover { color: #e89881 !important; } Let me know how it works on your site
Press 👍 or mark this answer as solution to help another one too

I've checked that there is a Css related to the max-width: 1400px and margin auto. Therefore It causes the margin when the width of container is over 1400px.

You can try adding to Home > Design > Custom Css
footer .page-section .content-wrapper { max-width: 100%; } Let me know how it works on your site
Press 👍 or mark this answer as solution to help another one too

Is it what your mean?

Try adding to Home > Design > Custom Css
section[data-section-id="6177d1eb3dfe9850e25d20a6"] .sqs-col-4:first-child { box-shadow: unset; } Let me know how it works on your site
Press 👍 or mark this answer as solution to help another one too

Remove my previous codes and replace it with the following one
.primary-button-shape-pill .btn[href*="contact"]:hover { color: #000 !important; } .header-actions-action [href*="contact"]:after { content: ""; position: absolute; width: 100%; height: 1px; left: 0; bottom: 0.1em; background-color: currentColor; transform: scalex(0); transform-origin: right; transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); } .header-actions-action [href*="contact"]:before { content: none !important; } .header-actions-action [href*="contact"]:hover:after { transform: scalex(1); transform-origin: left; } Let me know how it works on your site
Press 👍 or mark this answer as solution to help another one too

It seems that you add some spacer block on your site.
You can use the following codes in Home > Design > Custom Css to change the layout for a little bit
section[data-section-id="60af621883de860537e99bab"] .content-wrapper { border-top: 1px solid #000; padding-top: 0 !important; padding-bottom: 0 !important; } section[data-section-id="60af621883de860537e99bab"] .content > .sqs-layout > .row:last-child { display: grid; grid-template-columns: 1fr 1fr; } section[data-section-id="60af621883de860537e99bab"] .content > .sqs-layout > .row:last-child:after { content: none !important; } section[data-section-id="60af621883de860537e99bab"] .content > .sqs-layout > .row:last-child:before { content: none !important; } section[data-section-id="60af621883de860537e99bab"] .content > .sqs-layout > .row:first-child { display: none; } section[data-section-id="60af621883de860537e99bab"] .content > .sqs-layout > .row:last-child > .col:nth-child(2) { display: none; } section[data-section-id="60af621883de860537e99bab"] .content > .sqs-layout > .row:last-child > .col { width: 100%; } section[data-section-id="60af621883de860537e99bab"] .content > .sqs-layout > .row:last-child > .col:first-child { border-right: 1px solid #000; } .sqs-block-button-container--left { text-align: center; }  

Change this line makeSpans('h1') to makeSpans('h1.text-hover')

Hi @alanx,
I suggest another solution with grid. Try the following code on your site
@media only screen and (max-width: 767px) { .summary-item-list { display: grid; grid-template-columns: 1fr 1fr; } .summary-item { width: 100% !important; } } Let me know how it works on your site
Press 👍 or mark this answer as solution to help another one too

Your image block and text block are located in different parent node. So using Css selector can not reach your desired result.
I suggest using the following code in Home > Settings > Advanced > Code Injection, choose the footer
<script> document.addEventListener('DOMContentLoaded', () => { const hoverItem = document.querySelector('#block-yui_3_17_2_1_1636454313626_16083'); const targetText = document.querySelector('#block-yui_3_17_2_1_1636976739645_7146'); hoverItem.addEventListener('mouseover', () => { targetText.style.display = 'block'; }) hoverItem.addEventListener('mouseout', () => { targetText.style.display = 'none'; }) }) </script> <style> #block-yui_3_17_2_1_1636976739645_7146 { display: none; } </style> Let me know how it works on your site
Press 👍 or mark this answer as solution to help another one too

I think you can only customize what is available on Shopify Buy button editor, to customize it better you gotta use Shopify SDK to implement your own interface to mimic what is provided on Squarespace

It may require custom script, add this to footer
<script> (function() { document.querySelector("input.search-input").setAttribute("placeholder", "This is your Search Input"); })() </script>