tuanphan

Use this CSS code, it will apply to all blog post detail (with list page, will need to change view-item to view-list [class*="type-blog"].view-item header#header { background-image: url(https://cdn.pixabay.com/photo/2023/11/11/19/58/whisky-8381774_1280.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }

Do you have an example? We can imagine easier

Try this body { margin: 0; height: 100vh; cursor: url(https://static1.squarespace.com/static/63c8b02c67ac2c30ae9427df/t/657134d4ab330577bc8eb047/1701917908121/custom-curser.png), auto !important; } body a:hover, body a:hover * { cursor: url(https://static1.squarespace.com/static/63c8b02c67ac2c30ae9427df/t/657134d4a70814190f44bef5/1701917908113/custom-curser-hover.png), auto !important; } If you can't edit anything in edit mode, you can access safe mode with this link https://gracelillianlee.squarespace.com/config/safe

Try adding this to Website Tools (under Not Linked) > custom CSS. If it doesn't work, please share link to your site div.header-nav-item:last-child { position: absolute; right: 7vw; }

Try adding this to Website Tools (under Not Linked) > Custom CSS .fe-6558306d1a540a63576ae13a { --row-height-scaling-factor: 0 !important; }

Can you share link to this page?

You can add this code to Website Tools (under Not Linked) > Custom CSS to fix problem @media screen and (max-width:991px) { .gallery-fullscreen-slideshow { height: 30vh !important; } }

Can you share site url? We can check easier

Use this code under h2.entry-title.entry-title--list a { line-height: 25px !important; }

Hi, What is your site url? Maybe you used code to hide it on other pages

You try log out account and try again If it still doesn't work, try change browser

You can add this code to Website Tools (under Not Linked) > Custom CSS to fix problem /* Blog content image block space */ @media screen and (max-width:767px) { div.blog-item-content-wrapper .image-block.sqs-block, div.blog-item-content-wrapper .image-block.sqs-block:first-child { padding-top: 2px !important; padding-bottom: 2px !important; } }

Thank you. Which page you want to hide items 1, 2, 3, 4, 5? We can check easier and which page you added code I sent?

Try reduce Row Count

Use this .index-section-wrapper .content.has-main-media { h1, h2, h3, h4, h5, h6, p { a { color: #2796ce !important; } }}

If you use List Simple Grid, we can use CSS code (you need to share link to page in screenshot)

Remove code you posted above & use this code <style> nav.header-nav-list>div:nth-child(1), nav.header-nav-list>div:nth-child(2), nav.header-nav-list>div:nth-child(3), nav.header-nav-list>div:nth-child(4), nav.header-nav-list>div:nth-child(5) { display: none; } /* hide items on mobile */ [data-folder="root"]>div:first-child>div:first-child>div:nth-child(1), [data-folder="root"]>div:first-child>div:first-child>div:nth-child(2), [data-folder="root"]>div:first-child>div:first-child>div:nth-child(3), [data-folder="root"]>div:first-child>div:first-child>div:nth-child(4), [data-folder="root"]>div:first-child>div:first-child>div:nth-child(5) { display: none; } </style> If code doesn't work, you can setup an access password we can check easier, your site is private now

Use this new code .index-section-wrapper .content.has-main-media { h2 a, h3 a { color: #2796ce !important; }}

Squarespace has a lot of buttons, and I will share how to insert Google Material Icons for these buttons. Header Button Button Block Form Block/Newsletter Block Button List Section Button Donate Button Form Block Lightbox Button Add to Cart Button Checkout Button ... Two steps to add Google Material Icon Install Google Material Declare code for button #1. Install Google Material Icons First, access Google Material Icons site then choose an icon which you want to add to your site buttons. https://fonts.google.com/icons Next, a box will pop out on the right of the screen. Click Copy icon on Variable icon font to copy code. Add the code to Website Tools (under Not Linked) > Code Injection > Header. If you use Personal/Basic Plan, you can edit Site Footer > Add a Code Block > Paste the code. Scroll to this Code point box and copy Icon code #2. Declare Icon code You need to add this code to Website Tools > Custom CSS Header button header#header a.btn:before { content: "\e88a"; font-family: 'Material Symbols Outlined'; font-size: 20px; top: 3px; position: relative; } Button Block div.button-block a:before { content: "\e88a"; font-family: 'Material Symbols Outlined'; font-size: 20px; top: 3px; position: relative; } Newsletter Button span.newsletter-form-button-label:before { content: "\e88a"; font-family: 'Material Symbols Outlined'; font-size: 20px; top: 3px; position: relative; } Form Block Lightbox Button button.lightbox-handle:before { content: "\e88a"; font-family: 'Material Symbols Outlined'; font-size: 20px; top: 3px; position: relative; } Donate Block Button div.sqs-donate-button:before { content: "\e88a"; font-family: 'Material Symbols Outlined'; font-size: 20px; top: 3px; position: relative; } Add to Cart Button /* Add to Cart button icon */ .sqs-add-to-cart-button-inner:before { content: "\e88a"; font-family: 'Material Symbols Outlined'; font-size: 20px; top: 3px; position: relative; } List Item buttons a.list-item-content__button:before { content: "\e88a"; font-family: 'Material Symbols Outlined'; font-size: 20px; top: 3px; position: relative; } List Section Button a.list-section-button:before { content: "\e88a"; font-family: 'Material Symbols Outlined'; font-size: 20px; top: 3px; position: relative; } Checkout Button button.cart-checkout-button:before { content: "\e88a"; font-family: 'Material Symbols Outlined'; font-size: 20px; top: 3px; position: relative; } #3. Note with font-family Some icons will need a different font-family than the code above. To get font-family, first paste this url to browser address bar and find font-family line If you have problems, just comment below.

Try change 100% to 100vw or 150vw

Hi, What is your site url?

Hi, What is site url?

With hover, add this code to Website Tools (under Not Linked) > Custom CSS /* h4 color on hover */ .fe-65576dfbfe21dd44b1c2d058 h4:hover { color: #f1f; } With click, can you send current code in Code Injection? I can adjust it easier

You mean images on homepage? You can add this code to Website Tools (under Not Linked) > Custom CSS /* Limit image width */ .collection-type-gallery.enable-gallery-thumbnails #slideshow img { max-width: 1200px !important; margin: 0 auto; }

You can add this code to Website Tools > Custom CSS @media screen and (max-width:767px) { [data-section-id="6570a29fcd64646c7e2a286a"] { .user-items-list-carousel .mobile-arrows { display: flex !important; } .desktop-arrows.user-items-list-carousel__arrow-wrapper { display: none !important; } }}