tuanphan

If you use Personal/Basic Plan, you can add this code to Website Tools (under Not Linked) > Custom CSS @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1633126995558_54960+.row, div#block-yui_3_17_2_1_1633126995558_54960+.row+.row { width: 50% !important; float: left !important; } } If you use Business Plan/higher + You feel the code is not fine, you can use this code to Website Tools (under Not Linked) > Code Injection > FOOTER > Then check again on real mobile <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ if (jQuery(window).width() < 767) { $('div#block-yui_3_17_2_1_1633126995558_54960+.row .span-9 .code-block').insertAfter('div#block-yui_3_17_2_1_1633126995558_54960+.row>.span-3 .code-block'); $('div#block-yui_3_17_2_1_1633126995558_54960+.row .span-9 .code-block').insertAfter('div#block-yui_3_17_2_1_1633126995558_54960+.row>.span-3 .code-block'); } }) </script> <style> @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1633126995558_54960+.row .span-3 { display: grid; grid-template-columns: repeat(2,1fr); } } </style>

Hi, Which page in your screenshot?

Which code did you use? If you used this code You can change it to new code /* section hover */ @media screen and (min-width:992px) { body#collection-64f70b73d26309086c7a8dc6 { section:after { content: ""; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.3s ease; } section:hover:after { opacity: 1; transition: all 0.3s ease; } section .html-block { opacity: 0; transition: all 0.3s ease; } section:hover .html-block { opacity: 1; transition: all 0.3s ease; }}}

Yes. Adding to Footer will appear, but then we can use CSS to hide it on all pages. Currently I don't have code for Section in Site Footer, you can add it then share site url, we can check & give you code (if the site is live & you can't add it, you can duplicate the site & do there) With plugin, I used Section Loader Supreme plugin then use this code to Code Injection Footer First install plugin Next, create a page in Not Linked with Name (any name) - URL: above-footer Next, add your form into Not Linked Page Next, add this code to Blog Page Header Code Injection <div data-wm-plugin="load" data-target="/above-footer"></div> And add this code to Code Injection > Footer <script> $(document).ready(function(){ setTimeout( function() { $('div.wm-load-container').insertBefore('body[class*="type-blog"].view-item footer.sections'); }, 3000); }); </script> The code will add Not Linked Page Section above Footer on Blog Post Only

Hi, #1. You can add this code to Website Tools (under Not Linked) > Code Injection > Footer This code will create effect: When users click on Services >> Show all folder item under it without open new sub page. If this is not what you want, you describe your desired layout, we can check it again easier <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function() { $('.header-menu-nav-folder[data-folder="/services"]').appendTo('[data-folder="root"]>div>.container.header-menu-nav-item:nth-child(2)'); $('a[data-folder-id="/services"]').click(function() { $(this).toggleClass('tp-burger-folder'); }); }); </script> <style> .header-menu-nav-folder[data-folder="/insights"] { display: block !important; position: relative !important; transform: unset !important; overflow: hidden; height: 0 !important; transition: all 0.3s; } .header-menu-nav-folder[data-folder="/insights"] .header-menu-controls { display: none; } a.tp-burger-folder+.header-menu-nav-folder[data-folder="/insights"] { height: 100% !important; } .header-menu-nav-folder[data-folder="root"] { transform: unset !important; overflow: hidden; } [data-folder="/insights"] a { margin-top: 5px; margin-bottom: 5px; white-space: nowrap; } [data-folder-id] { margin-top: 10px; margin-bottom: 10px !important; } a[data-folder-id] span:nth-child(2):after { content: "\e009"; font-family: 'squarespace-ui-font'; } a[data-folder-id] { white-space: nowrap; } span.chevron.chevron--right { visibility: hidden !important; } </style> #2. You mean reduce text size? #3. To hide Footer on Mobile, add this code to Website Tools > Custom CSS @media screen and (max-width:767px) { footer.sections { display: none !important; } }

Can you share site url? We can check easier With product to cart, maybe you enable Express Checkout https://support.squarespace.com/hc/en-us/articles/206540817-Express-checkout

Which page are you referring to? I don't see it on home/main page

Hi, Exclude code for this page? https://flamingo-tangerine-b6pg.squarespace.com/design-shanghai-show-design-2023 or all project belong this page? https://flamingo-tangerine-b6pg.squarespace.com/

#1. Add this code to Website Tools (under Not Linked) > Custom CSS div#block-040a8317b5dde6e0b395 ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /* Aftensmad */ li.archive-group:nth-child(1) { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } /* Bagvaerk */ li.archive-group:nth-child(2) { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } /* Dessert */ li.archive-group:nth-child(3) { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } /* Frokost */ li.archive-group:nth-child(4) { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } /* Morgenmad */ li.archive-group:nth-child(5) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } /* Sode Sager */ li.archive-group:nth-child(6) { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } /* Tilbehor */ li.archive-group:nth-child(7) { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } #2. You mean increase text size or?

Add this code to bottom of Website Tools > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('div#block-yui_3_17_2_1_1701098820027_2447').insertAfter('div#block-yui_3_17_2_1_1692163036742_2082 li:nth-child(2) p:last-child'); }) </script>

Use CSS code (Website Tools > Custom CSS) li.lesson-category * { font-family: 'ABCFavoritMono-Book-Trial' !important; }

Change :after to :before It doesn't work properly, please share link to page where you use form, we can check easier

Some solutions to do this Option 1. Use CSS code to turn last 3 items from Navigation to button style, then next use CSS position absolute to push them to right of footer Option 2. Use JavaScript code to add 2 buttons to right of header + enable one button If you share link to your site, we can give code for option 2 (You need to provide button name + button url)

#yui- is dynamic but #block-yui/#block_ is static id, it won't change when you reload or refresh the page note #yui and #block-yui is different id.

You can consider create a new page, add countdown here, then when time is done, redirect to main homepage. What do you think?

Use this code to Website Tools > Code Injection > Footer <!-- Container for the splash screen with a specified ID --> <div class="splash-wrapper" id="loader-container"> <img src="https://content.invisioncic.com/p289038/monthly_2023_11/LogoTANIQtransparent.thumb.png.0c1808606ac76767e354e33194011587.png"/> </div> <style> div#loader-container img { max-width:500px; } /* Loader animation styles */ .splash-wrapper { display: none; /* Initially hidden */ position: fixed; z-index: 9999; background-color: white; height: 100vh; width: 100vw; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; animation-name: slideOut; animation-fill-mode: forwards; animation-duration: 0.65s; animation-delay: 5s; top: 0; } @keyframes slideOut { from { margin-left: 0vw; } to { margin-left: -100vw; } } @media screen and (max-width:767px) { div#loader-container { background-size: cover; } div#loader-container img { max-width: 300px; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function () { setTimeout(function(){ $('.splash-wrapper img').fadeIn(500); }, 3000); }); </script> See demo: https://tuanphan3.squarespace.com/1images-loading?noredirect pass: abc

Add this to Bottom of Code Injection > Footer <script> $(document).ready(function(){ $('<div class="mobile-custom-info"><p><a href="https://Instagram">Instagram</a><p><p><a href="mailto:abc@gmail.com">Email</a><p></div>').insertBefore('.header-menu-actions.social-accounts'); }); </script> <style> .mobile-custom-info a { font-family: var(--site-navigation-font-font-family); margin-left: 5vw; } </style>

You try enable Arrows on second carousel (we can use code to make it transparent then)

You can share link to page + Which section you want to hide, we can check easier I don't remember the code I used, need to check it on new site

It is space inside iframe tag (inside form), you can't control it from Squarespace. You try checking on the site where you got the form code, to see if they allow to use CSS code or not (If yes, I can check & give you code, then you can add to form from where you got the form) but if you want to remove padding top/bottom a bit, you can add this code to Website Tools (under Not Linked) > Custom CSS div#block-yui_3_17_2_1_1680701932999_8529 .video-caption-wrapper { display: none; } div#block-yui_3_17_2_1_1680701932999_8529 { padding-top: 0 !important; padding-bottom: 0 !important; }

Hi, Like this example? https://tuanphan3.squarespace.com/blog2-will/blog-post-title-one-2n2sy?noredirect pass: abc (under top section)

Can you share site url & Which template name do you use?

These class names/ids doesn't exist in 7.1 so you will need to update SS 7.1 doesn't have Index page so these class name won't work

Add this under <style> section.ProductItem-gallery .gallery-block img { max-width: 150px; height: auto !important; } </style>

Try adding this code to Website Tools (under Not Linked) > Custom CSS [data-section-id="65651ea79064433549c1ffe7"] .content-wrapper { padding-bottom: 0px !important; } .fe-65651ea79064433549c1ffe6 { grid-template-rows: repeat(18,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important; }