AnnaNeedsHelp

Hey guys, For whatever reason, the logo on the header on the "Our Impact" page has a transparent button/box surrounding it -- see attached. I'm not sure why it's only doing it on one page, and I'd like the button to look normal (flat). Does anyone have any fixes?

Site URL: https://elephant-raspberry-f4jz.squarespace.com/ hey guys! I'm just trying to align these "service" boxes on the same line horizontally. I'm not sure why it's happening. It displays fine on code block: https://codepen.io/annamakesmagic/pen/ZEoOMVq but when added to the block with the div labelled "lead" ("Our core service is...") the alignment gets weird. Can someone please show me how I can change my code (below) to fix it? Thanks! <style> .lead { display: block; padding-top: 3%; width: 100%; padding-bottom: 3%;} *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit;} html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} a { text-decoration: none; margin: 1rem 0; font-weight: 600; text-transform: uppercase; font-size: 1rem; letter-spacing: 1px;} p { font-size: 0.9rem; margin: 1rem 0; line-height: 1.4;} .service a { color: #d3d3d3; display: block;} .service h4 { font-color: #D3D3D3; font-size: 1.3rem; margin: 12rem 0 0.6rem;} .services-grid { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; justify-content: space-between; max-width: 1300px; margin: 0 auto; text-align: center; padding-top: 60px; } .service { align-items: start; background: #fff; margin: 30px; padding: 30px; border-radius: 10px; text-align: center; -webkit-box-flex: 1; flex: 1; display: -webkit-box; display: flex; flex-wrap: wrap; border: 1px solid #e7e7e7; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; min-height: 300px; max-width: 50%;} .service:hover {color: #333332} .service:hover { -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08); border: 1px solid #f26522;} .service .cta span { font-size: .8rem; color: #f265;} .service .cta:hover {color: #f26522; } .service > * { flex: 1 1 100%;} .service .cta {align-self: flex-end;} @media all and (max-width:900px) { .services-grid { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column;}} </style> <div class= "lead"> <h2> Our core service is making <br> our <span style="text-decoration:line-through">clients</span> partners successful. <br> </div> <section> <div class="services-grid"> <div class="service"> <h4>Tenant Representation</h4> <p>The right space is essential to the well-being of your business. We create strategies to ensure you’re in the right space, at the right time, for the right price.</p> <a href="#" class="cta">Read More <span class="ti-angle-right"></a> </div> <div class="service"> <h4>Acquisitions & Dispositions</h4> <p>We know what makes a good deal and have a knack for finding them. We assist buyers and sellers in the acquisition and disposition of investment properties and land.</p> <a href="#" class="cta">Read More <span class="ti-angle-right"></a> </div> <div class="service"> <h4>Project Leasing</h4> <p>Leasing the last 10% is where the profit lies. We know our markets and leverage longstanding relationships with retailers and brokers to ensure the project gets done.</p> <a href="#" class="cta">Read more <span class="ti-angle-right"></span></a> </div> </div> </section>

Site URL: https://elephant-raspberry-f4jz.squarespace.com/ I've been making a lot of content on Codepen but have realised that implementing it on square space can be tricky (at least for me) I really love this format for a team page for my client but want to check in with anyone who knows if I'll be able to add this to my site - I'm not sure what VUE is but a little research makes me weary Square Space won't integrate the code. If that is true, does anyone have any code examples like this one that I could use to achieve the same formatting and reveal effect? Thanks much, Anna https://codepen.io/annamakesmagic/pen/qBYNyXx

Hey Juan, The code on my squarespace is still not showing icons (see attached screen shot) but the code pen (https://codepen.io/annamakesmagic/pen/vYjNJLg) is displaying them fine. I'm not sure what I'm doing wrong. I've tried adding the scripts at top and bottom and added all the information under "settings" in codepen. I'm just not sure anymore what is needed and where it needs to go. I also wondered if the code that I pasted at top is pulling from an older version of Font Aweseome? Any ideas? Here is my updated code square space. Please let me know if you have any suggestions. CURRENT CODE BLOCK: <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script> src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> </head> <div> <h2 style= "padding-bottom: 20px"/> Our core service is making our<br> <SPAN STYLE="text-decoration:line-through">clients</SPAN> <SPAN STYLE="text-decoration:font-weight: bold">partners</SPAN> successful. <br <br> <br> </br> <div> </div> </div> <wrapper class="hero"> <div class="hero__wrapper"> <div class="wrapper"> <div class="panel animated slideInDown"> <h3>Tenant Representation</h3> <p>The right space is essential to the well-being of your business. We create strategies to ensure you’re in the right space, at the right time, for the right price.</p> <div class="slide"> <h4>Services</h4> <ul> <li><i class="fa-solid fa-chess"></i> Project Strategy & Planning </li> <li><i class="fa-solid fa-shop"></i> Development & Renovations </li> <li><i class="fa-solid fa-file-signature"></i> Competitive Landscape Analysis </li> <li><i class="fa-solid fa-percent"></i> Demographic Studies </li> <li><i class="fa-solid fa-file-signature"></i> Lease Administration </li> <li><i class="fa-solid fa-magnifying-glass-location"></i> Site Selection </li> </ul> </div> </div> <div class="panel animated slideInDown"> <h3>Investment Acquisition & Sales</h3> <p>We know what makes a good deal and have a knack for finding them. We assist buyers and sellers in the acquisition and disposition of investment properties and land.</p3> <div class="slide"> <h4>Services</h4> <ul> <li><i class="fa fa-check"></i> Manage Real Assets Investments </li> <li><i class="fa fa-check"></i> Pre-Acquisition and Pre-Development Due Diligence </li> <li><i class="fa fa-check"></i> Property Development & Investment </li> <li><i class="fa fa-check"></i> Capital Markets </li> <li><i class="fa fa-check"></i> Environmental Site Assessments </li> </ul> </div> </div> <div class="panel animated slideInDown"> <h3>Project Leasing & Management</h3> <p>Leasing the last 10% is where the profit lies. We know our markets and leverage longstanding relationships with retailers and brokers to ensure the project gets done.</p> <div class="slide"> <h4>Services</h4> <ul> <li><i class="fa fa-check"></i> service </li> <li><i class="fa fa-check"></i> service </li> <li><i class="fa fa-check"></i> service </li> <li><i class="fa fa-check"></i> service </li> <li><i class="fa fa-check"></i> service </li> <li><i class="fa fa-check"></i> service </li> <li><i class="fa fa-check"></i> Lease Administration </li> </ul> </div> </div> </div> </div> </wrapper> <link rel="stylesheet" href="https://codepen.io/annamakesmagic/pen/vYjNJLg.css"/> <link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet"> <link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet"> <style> .wrapper { height: 500px; max-width: 1270px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; } .wrapper::before, .wrapper::after { content: ""; display: table; clear: both; } .wrapper .panel { position: relative; margin: 5px 35px 5px; padding: 20px 10px 10px 10px; overflow: hidden; float: left; width: 25%; height: 100%; text-align: center; background: #F1F1F1; border: 2px solid #d1d3d4; box-sizing: border-box; transition: border 200ms ease; cursor: pointer; } .wrapper .panel h3 { display: block; padding-top: 20px; } color: #000; font-weight: 400; text-align: center; text-shadow: 0 2px 1px #FFF; } .wrapper .panel p { font-size: 1.1rem;} .wrapper .panel .slide { position: absolute; bottom: -460px; left: 0; z-index: 100; padding: 10px 10px 10px 10px; height: 100%; width: 100%; text-align: left; background: rgba(67, 86, 114, 1); box-sizing: border-box; transition: all 300ms 500ms cubic-bezier(0.645, 0.045, 0.355, 1); } .wrapper .panel .slide h4 { padding: 10px 10px 10px 20px; margin-top: 20px; margin-bottom: 20px; text-align: left; font-size: 1.3rem; font-weight: 400; color: #D1d3d4; } .wrapper .panel .slide ul li { padding: 10px 6px 10px 0px; line-height: 1.3rem; font-size: 1.1rem; color: #F0F0F0; } .wrapper .panel .slide ul li:last-child { border: 0; } .wrapper .panel .slide ul li .fa-solid { align: left; color: #F26522; } .panel:hover { border: 2px solid #d1d3d4; } .panel:hover .slide { bottom: 0; cursor: pointer; } .animated { animation-duration: 500ms; animation-fill-mode: both; animation-delay: 1s; } @keyframes slideInDown { 0% { -webkit-transform: translateY(-20%); -ms-transform: translateY(-20%); transform: translateY(-20%); visibility: visible; } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } ul { list-style-type: none; } .hero__wrapper { max-width: 2300px; margin-left: auto; margin-right: auto; text-align: center } </style>

Thank you, Tuan! I also figured out how to fix the "slide down" animation

Site URL: https://elephant-raspberry-f4jz.squarespace.com/ I've been learning coding and have learned so much from the forums -- but I have hit a roadblock. Code is almost working but it's not displaying icons (from font awesome) which I thought I linked through the html link src tags and is doing this strange lift and lower action before it settles on the page. If anyone could help you'd make me very happy. It's 5am and I've been working since 8 PM 😞 Here is my codepen link: https://codepen.io/annamakesmagic/pen/vYjNJLg And here is what I pasted into the html block: <!DOCTYPE html> <html> <wrapper class="hero"> <div class="hero__wrapper"> <div class="wrapper"> <div class="panel animated slideInDown"> <h3>Tenant Representation</h3> <p>The right space is essential to the well-being of your business. We create strategies to ensure you’re in the right space, at the right time, for the right price.</p> <div class="slide"> <h4>Services</h4> <ul> <li><i class="fa-solid fa-chess"></i> Project Strategy & Planning </li> <li><i class="fa-solid fa-shop"></i> Development & Renovations </li> <li><i class="fa fa-check"></i> Competitive Landscape Analysis </li> <li><i class="fa-solid fa-percent"></i> Demographic Studies </li> <li><i class="fa fa-check"></i> Lease Administration </li> <li><i class="fa-solid fa-magnifying-glass-location"></i> Site Selection </li> </ul> </div> </div> <div class="panel animated slideInDown"> <h3>Investment Acquisition & Sales</h3> <p>We know what makes a good deal and have a knack for finding them. We assist buyers and sellers in the acquisition and disposition of investment properties and land.</p3> <div class="slide"> <h4>Services</h4> <ul> <li><i class="fa fa-check"></i> Manage Real Assets Investments </li> <li><i class="fa fa-check"></i> Pre-Acquisition and Pre-Development Due Diligence </li> <li><i class="fa fa-check"></i> Property Development & Investment </li> <li><i class="fa fa-check"></i> Capital Markets </li> <li><i class="fa fa-check"></i> Environmental Site Assessments </li> </ul> </div> </div> <div class="panel animated slideInDown"> <h3>Project Leasing & Management</h3> <p>Leasing the last 10% is where the profit lies. We know our markets and leverage longstanding relationships with retailers and brokers to ensure the project gets done.</p> <div class="slide"> <h4>Services</h4> <ul> <li><i class="fa fa-check"></i> service </li> <li><i class="fa fa-check"></i> service </li> <li><i class="fa fa-check"></i> service </li> <li><i class="fa fa-check"></i> service </li> <li><i class="fa fa-check"></i> service </li> <li><i class="fa fa-check"></i> service </li> <li><i class="fa fa-check"></i> Lease Administration </li> </ul> </div> </div> </div> </div> </wrapper> </html>

Site URL: https://elephant-raspberry-f4jz.squarespace.com/about-us Successfully added HTML + Java & CSS for make a gallery slider section at the bottom of the "Our Culture" page but now all the other sections on that page are gone -- but it's still showing the gallery. I feel like I am so close to success! I'm not sure if it's something I did with the code or something else. Below is the code that I modified (and probably botched) from this CodePen: https://codepen.io/sfi0zy/pen/PoGvYyy Code Block: <link rel='stylesheet' href='https://unpkg.com/locomotive-scroll@4.0.6/dist/locomotive-scroll.min.css' /> <script src='https://unpkg.com/locomotive-scroll@4.0.6/dist/locomotive-scroll.min.js'></script> <div class='scroll-animations-example' data-scroll-container> <div class='scrollsection' data-scroll-section> <div class='item -normal' data-scroll data-scroll-speed="2"> <img class='image' src='https://picsum.photos/id/1005/300/400'> </div> <div class='item -big' data-scroll data-scroll-speed="1"> <img class='image' src='https://i.imgur.com/Rdhhm02.jpg'> </div> <div class='item -small -horizontal' data-scroll data-scroll-speed="4"> <img class='image' src='https://i.imgur.com/UUTdpwt.jpg'> </div> <div class='item -normal' data-scroll data-scroll-speed="3"> <img class='image' src='https://i.imgur.com/DJaduFT.jpg'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="2"> <img class='image' src='https://i.imgur.com/CWOwpwF.jpg'> </div> <div class='item -big -horizontal' data-scroll data-scroll-speed="4"> <img class='image' src='https://i.imgur.com/vi1E64P.jpg'> </div> <div class='item -small' data-scroll data-scroll-speed="2"> <img class='image' src='https://i.imgur.com/Ncd1GTP.jpg'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="1"> <img class='image' src='https://picsum.photos/id/1056/300/400'> </div> <div class='item -small -horizontal' data-scroll data-scroll-speed="3"> <img class='image' src='https://picsum.photos/id/1062/400/300'> </div> <div class='item -big' data-scroll data-scroll-speed="1"> <img class='image' src='https://i.imgur.com/vi1E64P.jpg'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="2"> <img class='image' src='https://i.imgur.com/CNhqK3N.jpg'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="1"> <img class='image' src='https://i.imgur.com/ZbEkM0c.jpg'> </div> <div class='item -small -horizontal' data-scroll data-scroll-speed="4"> <img class='image' src='https://i.imgur.com/vi1E64P.jpg'> </div> <div class='item -big' data-scroll data-scroll-speed="3"> <img class='image' src='https://i.imgur.com/sy3SA3P.jpg'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="2"> <img class='image' src='https://picsum.photos/id/111/400/300'> </div> <div class='item -small -horizontal' data-scroll data-scroll-speed="4"> <img class='image' src='https://i.imgur.com/7NqFHwf.jpg'> </div> <div class='item -big' data-scroll data-scroll-speed="2"> <img class='image' src='https://picsum.photos/id/137/600/800'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="1"> <img class='image' src='https://i.imgur.com/7NqFHwf.jpg'> </div> <div class='item -small -horizontal' data-scroll data-scroll-speed="3"> <img class='image' src='https://i.imgur.com/7NqFHwf.jpg'> </div> <div class='item -normal' data-scroll data-scroll-speed="1"> <img class='image' src='https://i.imgur.com/YluXeH7.jpg'> </div> </div> </div> <script> class Example { constructor(options) { this.root = options.root; this.init(); setTimeout(this.showImages.bind(this), 1000); } init() { this.scroll = new LocomotiveScroll({ el: this.root, direction: 'horizontal', smooth: true, lerp: 0.05, tablet: { smooth: true }, smartphone: { smooth: true } }); this.images = this.root.querySelectorAll('.image'); [].forEach.call(this.images, (image) => { image.addEventListener('click', () => { image.classList.add('-clicked'); this.hideImages(); }); }); } showImages() { [].forEach.call(this.images, (image) => { image.classList.remove('-clicked'); image.classList.add('-active'); }); } hideImages() { [].forEach.call(this.images, (image) => { image.classList.remove('-active'); }); setTimeout(this.showImages.bind(this), 2000); } } window.addEventListener('DOMContentLoaded', (event) => { const example = new Example({ root: document.querySelector('.scroll-animations-example') }); }); </script> Custom Css: //CULTURE PHOTO SLIDER// #block-yui_3_17_2_1_1662153700056_214084 .scroll-animations-example { > .scrollsection { padding: 10vh 10vh 10vh 10vmax; min-width: 550vh; } > .scrollsection > .item { display: inline-block; position: relative; margin: 0 -30vh 0 3vh; } > .scrollsection > .item::before { content: ''; display: inline-block; vertical-align: middle; height: 100%; } > .scrollsection > .item.-big { height: 80vh; width: 60vh; } > .scrollsection > .item.-big.-horizontal { height: 60vh; width: 80vh; } > .scrollsection > .item.-normal { height: 60vh; width: 45vh; z-index: 1; } > .scrollsection > .item.-normal.-horizontal { height: 45vh; width: 60vh; } > .scrollsection > .item.-normal:nth-of-type(3n) { bottom: 5vh; } > .scrollsection > .item.-normal:nth-of-type(4n) { bottom: -5vh; } > .scrollsection > .item.-small { height: 40vh; width: 30vh; z-index: 2; } > .scrollsection > .item.-small.-horizontal { height: 30vh; width: 40vh; } > .scrollsection > .item.-small:nth-of-type(3n) { bottom: 13vh; } > .scrollsection > .item.-small:nth-of-type(4n) { bottom: -13vh; } > .scrollsection > .item > .image { height: 100%; width: 100%; position: absolute; top: 0; left: 0; filter: grayscale(1); opacity: 0; pointer-events: none; transform: translateX(0) translateY(0) scale(1); transition: filter .3s ease, opacity 1s ease, transform 1s ease; } > .scrollsection > .item:nth-of-type(4n) > .image { transform: translateX(-30vh) translateY(-30vh) scale(.8); transition-delay: 0; } > .scrollsection > .item:nth-of-type(4n - 1) > .image { transform: translateX(30vh) translateY(30vh) scale(.8); transition-delay: .05s; } > .scrollsection > .item:nth-of-type(4n - 2) > .image { transform: translateX(-30vh) translateY(30vh) scale(.8); transition-delay: .1s; } > .scrollsection > .item:nth-of-type(4n - 3) > .image { transform: translateX(-30vh) translateY(-30vh) scale(.8); transition-delay: .15s; } > .scrollsection > .item > .image.-active { transform: translateX(0) translateY(0) scale(1); opacity: .8; pointer-events: auto; transition: filter .3s ease, opacity 1s ease, transform 1s ease; } > .scrollsection > .item > .image.-clicked { transform: translateX(0) translateY(0) scale(5); opacity: 0; pointer-events: auto; transition: filter .3s ease, opacity 1s ease, transform 1s ease; } > .scrollsection > .item > .image.-active:hover { height: 100%; width: 100%; position: absolute; top: 0; left: 0; filter: grayscale(0); opacity: 1; cursor: pointer; } }

I've made it public for now.

@taunphan Still not working 😞 The mouse disappears when it's not hovering over an element but is still the finger pointer. Any suggestions?

Thank you for your response. I'm still a bit lost. You're saying I add the first (CSS) code custom CSS and then add the 2nd posted code to a JS box (??) or the Footer Injection section? Is JS box something I add to the Footer Injection box or do I add a code block somewhere?

Site URL: https://reindeer-gecko-2nnz.squarespace.com/config/ Hey there! I'm brand new to coding and really having fun with it but getting over my head trying to make a custom cursor. I can't stop thinking about this cursor: https://codepen.io/jeangontijo/pen/pxojrg The link includes its CSS code, but when I plug it into "Custom CSS" or "Header Code Injection", it doesn't seem to change anything. Can someone help me? Please and thank you, Anna