tuanphan

This CSS causes problem

You can use this code to Website > Website Tools > Custom CSS
body#collection-5bca34dee5e5f0cd07ce8da8 .gallery-block:hover { cursor: pointer; }  

You can use this code to Website > Website Tools > Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('<section class="page-section custom-section"><div class="section-border"><div class="section-background"><img src="https://images.squarespace-cdn.com/content/v1/65ea61bd51b55338cbb59aa6/cbead0c8-b974-434f-a718-0609ff588634/HF-BG-Header-Thin.png?format=2500w"/></div></div></section>').insertBefore('[class*="type-events"].view-item article section:first-child'); }); </script> <style> section.page-section.custom-section>div {padding-top: 60% !important;} section.page-section.custom-section { min-height: 60vh; } section.page-section.custom-section+section { padding-top: 0px !important; } </style>

Hi,
It is fine on my phone now

You can use this code to Website > Website Tools > Custom CSS
@media screen and (min-width:992px) { .user-items-list-item-container[data-section-id="6604528bafc28253fb80433b"] li p:nth-child(n+2) { position: absolute; right: 10px; bottom: 10px; } .user-items-list-item-container[data-section-id="6604528bafc28253fb80433b"] .slide-content.list-item-card-background { width: 100% !important; } }  

You can use this code to Website > Website Tools > Custom CSS
@media screen and (max-width:991px) { body#collection-65ae0ad75e24a512e6772826 { overflow: hidden; } }  

You try this CSS code
.newsletter-form-body { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .newsletter-form-body div { width: 90% !important; min-width: unset !important; } .newsletter-block .newsletter-form-button-wrapper { text-align: left !important; }

You can use this code to Website > Website Tools > Custom CSS
/* remove portfolio pagination */ .item-pagination[data-collection-type^="portfolio"] { display: none; }  

You can use this code to Website > Website Tools > Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function() { $('a#site-title:contains("new")').text('<span class="new">new</span><span>thing | kansas city</span>'); $("a#site-title").each(function(){ $(this).html($(this).text()); }); }); </script> <style> a#site-title span:nth-child(1) { font-weight: bold; } </style>

For example first item, you used this code
a.grid-item[href="/films/director-reel-2024"]:hover img { content: url(https://static1.squarespace.com/static/64382eed1c35456fd1ce5b34/t/65b926225b27dc7fe8b06d07/1706632744209/Director_Reel_01.gif) } you can change it to
a.grid-item[href="/films/director-reel-2024"] .grid-image-inner-wrapper { background-image: url(https://static1.squarespace.com/static/64382eed1c35456fd1ce5b34/t/65b926225b27dc7fe8b06d07/1706632744209/Director_Reel_01.gif); background-size: cover; background-repeat: no-repeat; background-position: center center; } a.grid-item[href="/films/director-reel-2024"]:hover img { opacity: 0; }  

Portfolio Hover Background, needs this CSS code
a.portfolio-hover-item:hover * { color: #000 !important; }  

With mobile, use some code like this
@media screen and (max-width:767px) { button[class*="arrow-button"] svg { display: none !important; } [class*="arrow-icon-background"] { background-size: contain; background-repeat:no-repeat; background-position: center center; background-color: transparent !important; } button[class*="arrow-button--left"] [class*="arrow-icon-background"] { background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1773097810_Group12@2x.png.fd2d6dc749f79343ae687e29649cea4f.png); } button[class*="arrow-button--right"] [class*="arrow-icon-background"] { background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1753379866_Group13@2x.png.54c2b0e59adbe1a1f31f46b8b628398d.png); } }  

You try this CSS code
button.gallery-lightbox-close-btn { border: none !important; outline: none !important; }  

Don't remove any code in your current code. Use this CSS code to change button text on hover
a.list-item-content__button.sqs-block-button-element.sqs-block-button-element--medium.sqs-button-element--primary:hover { color: #495A58 !important; }  

Use this code to Custom CSS box
footer#footer-sections { z-index: 99999 !important; }

Use this code to Website > Website Tools > Custom CSS
 
@media screen and (min-width:768px) { div#block-yui_3_17_2_1_1711339618704_6544>div { padding-bottom: 5% !important; } }  

Add to Settings > Advanced > Code Injection > Lock Page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> $(document).ready(function() { $('<ul class="t-links"><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li><li><a href="#">Link 4</a></li></ul>').insertBefore('div.sqs-slice-password'); }); </script> <style> ul.t-links { list-style: none; padding-left: 0; display: flex; justify-content: center; } ul.t-links li a { color: rgba(28,28,28,.5); font-family: 'chalfont'; padding-left: 10px; padding-right: 10px; } ul.t-links li a:hover { color: rgba(0,118,245,.92); } </style> Just tested on my test site

Try this to Custom CSS box
.fe-block-15c8120fcf21be14e6aa { mix-blend-mode: exclusion !important; }  

There is a plugin can help you with this: https://www.sqsmods.com/social-icons
In case you have no budget to use plugin, you can let me know which icons you want to add, I will test some code and give you

We can use JS code to target to add this, if you share link to this page, we can check & give you code easier

Hi,
In homepage, you have 2 Newsletters
Top is Newsletter inside Homepage Content (this Newsletter will appear on One Page only)
Bottom is Newsletter inside Footer (this Newsletter will appears on All Page)
 
 

You can use this code to Website > Website Tools > Custom CSS
@media screen and (max-width: 767px) { .fe-block-yui_3_17_2_1_1708697400018_7171, .fe-block-a32664e2649c21bf4787, .fe-block-bfd55a35a41700d72f33, .fe-block-68ad8eed433dc715b7f7 { display: none; } .fe-65d8adad9394a8243ae81fc3, .fe-65d8afa5e81a4d338d154ffe { display: block; padding: 6vw; } .fe-block-yui_3_17_2_1_1708697400018_12057, .fe-block-yui_3_17_2_1_1708697400018_14024 { margin-bottom: 6vw; }} @media screen and (min-width: 768px) { .fe-block-a55e22292f952b01a4fe, .fe-block-b7dd6436c30150a67b96 { display: none; } .fe-65d8adad9394a8243ae81fc3, .fe-65d8afa5e81a4d338d154ffe { display: block; padding: 0 6vw ; } .fe-block-yui_3_17_2_1_1708697400018_12057, .fe-block-yui_3_17_2_1_1708697400018_14024 { margin-bottom: 2vw; } .fe-block-a32664e2649c21bf4787, .fe-block-68ad8eed433dc715b7f7 { margin-top: 3vw; }}  

I think the code, can cause problems on some screen size, you can check on some screen sizes, to see if it has any problems or not.
Use this new code instead
.header-display-desktop, .header-title-nav-wrapper { align-items: flex-start !important; }  

Use standard page with Summary Block, you can adjust layout easier (add text, banner, any blocks to this page)
 

Try using this code to Website > Website Tools > Custom CSS
section.ProductItem-additional+section .ProductItem-relatedProducts, section.ProductItem-additional+section h2, .ProductItem-relatedProducts { background-color: #f1f !important; }