tuanphan

You can replicate cv link by adding this to Settings > Developer Tools > Code Injection > Footer
<div class="sqs-block html-block sqs-block-html" id="kl-cv"><div class="sqs-block-content"> <div class="sqs-html-content"> <p style="text-align:right;white-space:pre-wrap;" class=""><a href="https://read.cv/yumobennyyang" target="_blank"><span class="sqsrte-text-color--accent">↗cv</span></a></p> </div> </div></div> <style> div#kl-cv { position: fixed; top: 1vw; right: 2vw; z-index: 99999; padding: 0 !important; } </style>  

Use this code
@media screen and (max-width:767px) { .counter-value{ width: 50% !important; clear: none !important; } .counter-value:nth-child(2n+1) { clear: left !important; } .counter-value:after { font-size: 12px; } }  

Add to Design > Custom CSS
/* Smiling Home */ body#collection-6492199cb9772729c07c0887 { header#header a { color: #50a4c9 !important; } .burger-inner>div { background-color: #50c4e9 !important; }}  

You can edit that page > Add a Code Block (anywhere) > Paste this code into Code Block
<style> .burger-inner>div { background-color: white !important; } </style>  

The site is 7.0 template, but you can replicate it in 7.1 (but require some Custom code, you can post on forum, we can help)
Nav on both sites of logo >> possible with code Dots navigation on right of screen >>> possible with code With other elements, I think you can replicate it easier by yourself

Use this code
/* resize mobile image */ @media screen and (max-width:767px) { [data-section-id="637ca4d8419b7118a6df69dc"] .section-border img { content: url(https://images.squarespace-cdn.com/content/637252bf18191d48209d4dfe/5ac2496e-2fc9-456e-939c-872c720f39de/TFC+HP+Header+%28Mobile%29+%282%29.png?content-type=image%2Fpng); } }  

You can send watermark image, we can give code to make it overlay all images.

padding has no negative value
you can use margin under padding
margin-right: -4px;

You can add top value to this code
section[data-section-id="64b720193d60ec69b3d699f2"] .user-items-list-carousel__media-inner { scale: 50%; top: -50px !important; }  

Your CSS box has a syntax error. Can you send all current code in CSS box?

You can add this to Design > Custom CSS
/* Fixed product image */ @media screen and (min-width:768px) { .tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery { position: sticky; top: 0; } }  

Change to this code
@media screen and (max-width:1024px) { .header-actions.header-actions--right, .header-actions.header-actions--right .header-actions-action { display: flex !important; } div.header-actions-action { position: relative; left: -100px !important; } a.btn.btn--border.theme-btn--primary-inverse.sqs-button-element--primary { display: block !important; } a.btn { padding-top: 10px !important; padding-bottom: 10px !important; padding-left: 20px !important; padding-right: 20px !important; } }  

Use this CSS to add space inside image. This code will change width to 100% - 8px, height to 100% - 8px, then move image to right 4px (so it will have left/right space = 4px), and move down 4px (so top/bottom space = 4px)
#collection-6452ac9c917bdf36311b4be3 section[data-section-id="6452aca66bb4183fdbf6d4da"] .user-items-list-carousel__media-inner img { width: calc(~"100% - 8px") !important; height: calc(~"100% - 8px") !important; left: 4px !important; top: 4px !important; }

Add to Summit Page Header
<style> a.btn { display: none; } .header-layout-nav-right .header-actions { display: none; } nav>div:nth-child(3)>a { background-color: black; color: white !important; padding-left: 10px !important; padding-right: 10px !important; } </style>

You will use Grid 2 items/row on all pages or different? If all same, we can use 1 code, but if each page use a different number items/row, each page will need a different code.
Use this
<style> body[class*="type-blog"].view-item div.gallery-block .slide:first-child { width: 100% !important; } body[class*="type-blog"].view-item div.gallery-block .slide:nth-child(2n+1) { clear: none !important; } </style>

Use this CSS for View project underline hover
h3.portfolio-title:before { content: ""; background: black; height: 1px; width: 0; margin-top: 1px !important; transition: width 1s; margin: 0 auto; position: absolute; bottom: 0; } h3.portfolio-title:hover:before { width: 100%; } h3.portfolio-title { display: inline-block; position: relative; }  

Change this code
.gallery-section .gallery-grid-item { filter: drop-shadow(1px 2px 5px #000); } to this
.gallery-section .gallery-grid-item .gallery-grid-item-wrapper { filter: drop-shadow(1px 2px 5px #000); }  

Edit product > Additional Info > Add a Code Block > Paste this code
<style> body { background-color: #f1f2f3 !important; } section, .section-border, .section-background { background-color: transparent !important; } section#pdp * { color: black; } </style>  

It already fine to me

Hi,
SS provide free SSL, see detail: https://support.squarespace.com/hc/en-us/articles/205815898-Understanding-SSL-certificates

Use this code instead
<style> header#header img { content: url(paste new logo image url here); } </style>  

You can reduce Blog Title size (h1) to prevent this. Or add this to Design > Custom CSS
@media screen and (min-width:768px) { /* blog title mobile */ .blog-item-title h1 { font-size: 40px !important; } }  

You can add this to Design > Custom CSS
a.portfolio-hover-item:nth-child(1) span { color: blue; } a.portfolio-hover-item:nth-child(2) span { color: brown; } a.portfolio-hover-item:nth-child(3) span { color: yellow; } a.portfolio-hover-item:nth-child(4) span { color: red; }

Add to Design > Custom CSS
/* hide lemon on mobile */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1688813554529_8064 { visibility: hidden; } }  

Change your first code, from this
.gallery-caption { position: absolute; top: 0; left: 0; background: rgba(32,28,105,0.9); /* overlay color */ height: 100%; padding: 0; opacity: 0; } to this
.gallery-caption { position: absolute; top: 0; left: 0; background: rgba(32,28,105,0.9); /* overlay color */ height: 100%; padding: 0; opacity: 0; pointer-events: none; } (I added pointer-events: none;)