tuanphan

Use this CSS code p.gallery-caption-content { text-align: center; }

You can add this CSS code @media screen and (min-width: 992px) { .header-burger { flex-basis: 100px; justify-content: flex-end; } .header-title-nav-wrapper { padding-left: 100px; }}

Try this new code. If it doesn't work, you can keep new code, I can check it again easier @media screen and (max-width: 767px) { .portfolio-text { justify-content:flex-end !important; top: unset !important; background-color: rgba(255,255,255,.7) !important; opacity: 1 !important; } .portfolio-overlay { opacity: 0 !important; } }

Can you share link to event?

What is site url? We can check easier

The only way is add a Folder then you can add link items to folder

Hover image >> Show overlay only or show overlay + text? If text, can you enable Gallery Caption + add some text? If overlay only, add this code to Website Tools (under Not Linked) > Custom CSS figure[class*="gallery"]:not(.gallery-slideshow-item) { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption p.gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } figure[class*="gallery"]:hover .gallery-caption-wrapper p.gallery-caption-content { opacity: 1 !important; } /* overlay */ div[class*="-item-wrapper"]:after { background: #f4f6ea; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } figure[class*="gallery"]:hover div[class*="-item-wrapper"]:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; }

You can add it to Site Footer, then we can give jQuery code to move its position Or use plugin. I used to help some sites to achieve same cases, by using section in footer or plugin

Event Summary doesn't support Read More Link, if you need to add a read more, you can add it in Excerpt Or add this to Website Tools (under Not Linked) > Custom CSS to fake read more link div#block-yui_3_17_2_1_1698177917931_6440 { .summary-title a:after { content: "read more"; position: absolute; bottom: -40px; left: 0; color: var(--tweak-summary-block-secondary-metadata-color); font-size: 13px; font-family: var(--body-font-font-family); } .summary-content { position: relative; }}

With Selected Page: https://violin-bluebird-wtwa.squarespace.com/selected-images to add caption with CSS, add this code to Website Tools (under Not Linked) > Custom CSS /* Selected page */ body#collection-654552924507a264bb7101c2 { [data-slide-url]:after { display: block; color: black; z-index: 99999; position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); } [data-slide-url="ka7yigpadnsde8p2reu0kwq137dwzr"]:after { content: "Feral Goats on Slievecarran"; } [data-slide-url="rbzzrph9y7ytkop3cfbeeia81shyuf"]:after { content: "Bouleevin-Sunrise"; } [data-slide-url="w70lm6szn1rvswsz5sqrn6saws657s"]:after { content: "Doonties-Gateway-Dingle-Peninsula.jpg"; } } If you feel it okay, I will give quick guide to find data-slide-url

You need scroll screen to right to see burger.. Use this code to Custom CSS to make menu slide from right @media screen and (max-width: 768px) { .header-menu { opacity: 1; visibility: visible; transform: translateX(400px); transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } .header--menu-open .header-menu { transform: translateX(0); } .header-menu-nav-folder, .header-menu-nav-item a, .header--menu-open .header-menu .header-menu-nav-list, .header-menu-actions, .header-menu-cta { transition: unset !important; transform: unset !important; }}

You can use this code to achieve this

Do you need to remove red overlay? Add this to Website Tools (under Not Linked) > Custom CSS a.grid-item img { filter: grayscale(1); -webkit-filter: grayscale(1); } a.grid-item:hover img { filter: grayscale(0); -webkit-filter: grayscale(0); }

You can use this code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function() { $("nav.main-nav>ul>li:nth-child(1)>a").click(function() { var link = $(this).text(), href = "/portfolio-overview"; window.location.href=href; }); }); </script>

I see it still works here, but when users hover out >> checkbox disappear. You mean this problem?

Try this code to Website Tools (under Not Linked) > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(() => { const select = document.querySelector('select[aria-label="Select Size"]'); const parent = select.parentElement.parentElement.parentElement; const data = JSON.parse(parent.getAttribute('data-variants')); const adult = data.find((a) => a.attributes.Guest === '11oz'); const num = document.querySelector('input[aria-label="Quantity"]').value; const inStock = num <= adult.qtyInStock; const price = !adult.onSale ? adult.priceMoney.value : adult.salePriceMoney.value; select.value = '11oz'; document.querySelector('div[class="product-price"]').innerText = '£' + price; setTimeout(() => { parent.setAttribute('data-selected-variant', JSON.stringify(adult)); parent.setAttribute('data-variant-in-stock', JSON.stringify(inStock)); const event = new Event('change'); select.dispatchEvent(event); }, 1000); }) </script>

You can add this code to Website Tools (under Not Linked) > Custom CSS div.accordion-block p:first-child { float: left; width: 60%; margin-right: 10px; } div.accordion-block p:first-child img { width: 100%; }

What is your site url?

#1. You mean move this? #2. You can use this CSS code (this code include mobile + tablet) /* Hide secondary nav */ @media screen and (max-width:991px) { div#wm-subnav { display: none !important; } } #3. I see you figured it out?

You can replace it with new logo file by replacing this code header#header img { filter: brightness(1) invert(1); -webkit-filter: brightness(1) invert(1); } to this header#header img { content: url(https://cdn.pixabay.com/photo/2023/11/14/15/46/nikon-8388022_1280.jpg); } replace Pixabay with new image url

Title uses this header#header.shrink a#site-title { color: #F9F9ED !important; }

To show 3 images/row same as desktop, add this code to Website Tools (under Not Linked) > Custom CSS @media screen and (max-width:640px) { div#page-64ab024e024d515f77265450 .span-4 { column-count: 3; column-gap: 5px; } }

You mean move this image?

ThanksforHelping Password is incorrect.

Block has 2 type of ID #yui-.. it will change if you reload the page #block-yui_ or #block-... it is static id, you should use this ID To find Block ID, you can use this free tool https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff