tuanphan

Can you share link to this page where you have problem?

Which screen size do you see problem? It looks fullwidth to me

Can you share link to your site?

What do you want to customize?

You can enable scroll header then use this code to Website Tools (under Not Linked) > Custom CSS header#header, header#header img, header#header.shrink img { transition: all 0.3s; } header#header.shrink img { width: 30px; }

Sometimes when pasting directly, some characters are changed to invalid. You can click icon then paste the code

Can you share link to page where you use accordion?

Hi, Do this for 1 product or all products?

You missed a symbol Line 6 in your code need 2 symbols }} If you use 1 } only, browser will combine line 8 to line 12 into your old code

You can edit Products > In Additional Info > Add a Code Block > Paste this code <button type="button" onclick="history.back();">Back</button>

It now looks fine to me, include font

Add this to Website Tools (under Not Linked) > Custom CSS h2#testimonials { scroll-margin: 150px; }

SS doesn't have this feature, however you can consider setting it to Private. I wrote this guide to make a portfolio item private.

You can click Add Section Click Add Blank: Classic Editor

(1) First, add this code to Website Tools (under Not Linked) > Code Injection > Footer <a href="https://google.com" target="_blank" class="image-ads"> <img src="https://cdn.pixabay.com/photo/2023/12/20/07/04/clouds-8459053_1280.jpg"/> </a> <!-- DO NOT ADJUST BELOW THIS LINE --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('.image-ads').appendTo('.code-block .image-ads'); }); </script> Change Google.com with your new url. Change Pixabay with your image url (2) Next, edit page where you want to place Ads Image > Add a Block > Choose Code > Paste this code <div class="image-ads"></div>

Hi, You did this with custom code or? If code, can you send it? I think we can adjust it a bit

Try this code to Website Tools (under Not Linked) > Code Injection > Footer <style> .portfolio-custom { padding: 0 3vw; } .portfolio-custom a { display: block; margin-bottom: 3vw; } .portfolio-custom a img { width: 100%; } .portfolio-custom a h3 { margin-top: 0; } @media screen and (min-width: 800px) { .portfolio-custom { display: none; } } @media screen and (max-width: 800px) { .portfolio-hover { display: none; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> window.onload = function () { if (Static.SQUARESPACE_CONTEXT.collectionId == "6543e9a51c290f167362e3bf"") { $portfolioHover = $(".portfolio-hover"); if ($portfolioHover.length > 0) { var images = []; $portfolioHover.find(".portfolio-hover-bg-img img").each(function () { images.push($(this).data("src")); }); $portfolioHover.parent().prepend('<div class="portfolio-custom">'); $portfolioHover.find(".portfolio-hover-item").each(function (i) { $(".portfolio-custom").append(` <a href="${$(this).attr("href")}"> <img src="${images[i]}" /> <h3>${$(this).text().trim()}</h3> </a> `); }); } } }; </script>

We can bold each item like this but can't bold specific word of item

You mean Move Login (user) icon to left of Header? Or Login text to left of header?

Use this code for mobile @media screen and (max-width:991px) { .user-items-list-item-container[data-section-id="6582d8ff86c8db2c2e5e0949"] { .desktop-arrows { display: flex !important; } .mobile-arrows { display: none !important; } }}

It will require a lot of code, but I did a similar case a few months ago. You can see demo here: https://tuanphan.squarespace.com/burger-menu-2?noredirect pass: abc (you need to enter twice) First you need to add 2 Sections in Footer. Suppose it is section 3 (with 2 text blocks side by side) and section 4 (gallery section slideshow), then design your layout. Next, use this code to Website Tools (under Not Linked) > Custom CSS @media screen and (min-width:768px) { /* Fix footer invisible behind page content */ footer.sections { z-index: 9999999 !important; } /* change footer 2 sections to 100% height and 50% width */ footer.sections section:nth-child(3), footer.sections section:nth-child(4) { width: 50%; height: 100vh; position: fixed; z-index: 9999; left: 0; } footer.sections section:nth-child(3) { left: 0; } /* move footer section 4 to right 50% */ footer.sections section:nth-child(4) { left: 50%; right: 0; } /* disable scroll when burger menu is open */ .header-burger--open body { overflow: hidden; } /* effect on 2 sections when click burger menu */ body footer.sections section:nth-child(3), body footer.sections section:nth-child(4) { transition: transform 1.2s ease; top: 50px !important; } body footer.sections section:nth-child(3) { transform: translateY(-150%); transition: transform 0.75s ease; } body footer.sections section:nth-child(4) { transform: translateY(150%); transition: transform 0.75s ease; } body.header--menu-open footer.sections section:nth-child(3) { transform: translateY(-0%); transition: transform 0.75s ease; } body.header--menu-open footer.sections section:nth-child(4) { transform: translateY(0%); transition: transform 0.75s ease; } } Note: 50px in top: 50px !important; is space between 2 sections with bottom of header. You can adjust this value.

Try this code to Website Tools (under Not Linked) > Custom CSS div.grid-item img, img.ProductItem-gallery-slides-item-image { object-fit: contain !important; }

Like this?

Can you send HTML files? I will try test it easier

Use this CSS code body.homepage article section:first-child { padding: 0 !important; } body.homepage header#header { background-color: transparent !important; } body.homepage .gallery-fullscreen-slideshow { padding: 0px !important; }