tuanphan

Hi. You can add code & try resize.

Hi, What is your site url?

Add to Design > Custom CSS /* Blog Post Header */ body[class*="type-blog"].view-item a#site-title { color: black; } body[class*="type-blog"].view-item div.header-nav-item a { color: black !important; } body[class*="type-blog"].view-item header#header svg { fill: black; }

Add to Design > Custom CSS // Fix tablet // @media screen and (max-width:900px) and (min-width:641px) { div#block-yui_3_17_2_1_1659403612199_12511+.row .span-8 .span-2:last-child { width: 100%; } div#block-yui_3_17_2_1_1659403612199_12511+.row .span-8 .span-2:not(:last-child) { width: 33.3333%; } }

Which code did you use?

Try adding code to Code Block, not Embed Block

Add a Code Block > paste this code <section class='hero-section'> <span class='heading'>Text fill on scroll</span> </section> <section class='sec1'> <div class="row"> <div class='word'> <span class='letter'>H</span> <span class='letter'>E</span> <span class='letter'>L</span> <span class='letter'>L</span> <span class='letter'>O</span> </div> <div class='word'> <span class='letter'>W</span> <span class='letter'>E</span> <span class='letter'>L</span> <span class='letter'>C</span> <span class='letter'>O</span> <span class='letter'>M</span> <span class='letter'>E</span> </div> <div class='word'> <span class='letter'>T</span> <span class='letter'>O</span> </div> <div class='word'> <span class='letter'>T</span> <span class='letter'>H</span> <span class='letter'>E</span> </div> <div class='word'> <span class='letter'>N</span> <span class='letter'>E</span> <span class='letter'>W</span> </div> <div class='word'> <span class='letter'>W</span> <span class='letter'>O</span> <span class='letter'>R</span> <span class='letter'>L</span> <span class='letter'>D</span> </div> </div> </section> <style> .sec1 div, .sec1, .hero-section { display: flex; justify-content: center; align-items: center; } .heading { font-family: "Space Grotesk", sans-serif; } body { margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 200vh; } section { min-height: 100vh; border: 10px solid black; } .hero-section { padding: 0 10%; } .heading { font-size: 32px; } @media (min-width: 420px) { .heading { font-size: 72px; font-weight: 700; } } .sec1 .row { height: 400px; } .sec1 div { font-weight: 700; margin: 0 8px; } @media (min-width: 600px) { .sec1 div { font-size: 48px; } } .sec1 div span { -webkit-text-stroke: 2px black; color: white; margin: 0 1px; } .fill { color: black !important; } </style> <script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js"></script> <script src="https://unpkg.com/gsap@3/dist/CSSRulePlugin.min.js"></script> <script> ScrollTrigger.batch(".letter", { trigger: '.row', start: "center-=100 center", scrub: 1, onEnter: batch => gsap.to(batch, {color: "#000", stagger: 0.017}), }); </script>

Use this CSS div#block-5f4ac623c656937e8255 .email input { color: white !important; }

You mean clicking Image >> Show video on lightbox, video is play?

Add to Design > Custom CSS body.homepage .lightbox-content .form-title:after { content: "If so, enter your name and email and grab your FREE HEALTH PDF: 'Channeled Messages From The Divine To Boost Your Immune System, Detoxify Your Liver, and Help You To Bounce Back Quicker.'"; display: block; color: dimgrey !important; font-size: 18pt !important; margin-top: 20px; font-weight: normal; }

Add this to Code Block <style> @media screen and (max-width:767px) { video { width: 100% !important; } } </style>

Hi, Which position on Footer?

First, add # in 2 buttons url. Next, try Add a Code Block under last 3 Markdown Blocks. Paste this code <script> // monthly $("div#block-yui_3_17_2_1_1659598446675_16536 a").click(function(){ $("div#page-section-62ea589af5d7363474f691dd>.row:nth-child(2)").toggleClass('montly'); }); // yearly $("div#block-yui_3_17_2_1_1659598446675_18470 a").click(function(){ $('[data-section-id="62eb7da007dec228df318aee"]').toggleClass('yearly'); $("div#page-section-62ea589af5d7363474f691dd>.row:nth-child(2)").toggleClass('montly'); }); </script> <style> /* initial: hide yearly */ [data-section-id="62eb7da007dec228df318aee"] { display: none; } /* show yearly */ .yearly { display: block !important; } /* hide montly */ .montly { display: none; } </style>

Hi, Which page are you referring to?

Use this a.nested-category-breadcrumb-link { font-family: 'Walsheim' !important; }

Hi. What is blog page url?

Which page are you referring to?

Use this tool to find data section id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

You want, 2 category sites with same header but different navigation items different footer different logo link Is this right?

You can consider adding a Gallery Section Grid under SLideshow, then we will give code to show slideshow on desktop, show grid on mobile

It looks fine to me. Can you describe in more detail?

You want to add navigation in red box?

Hi. What is product page url? With code I sent, if you want 1 item/row, just change number 2 to 1

Just answered this question on some of your other posts. You can check it.

Add to Design > Custom CSS <style> .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(2n) { display: none; } </style> (n run from 0, 1, 2,...)