Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

tuanphan

Circle Member
  • Posts

    31,834
  • Joined

  • Last visited

  • Days Won

    326

Everything posted by tuanphan

  1. Next, add this to Design > Custom CSS /* header whatsapp icon */ header#header [href*="wa.me"] svg { display: none; } header#header [href*="wa.me"]:before { content: "\f232"; font-family: "Font Awesome 5 Brands"; font-weight: bold; color: black; }
  2. Try this code <style> .header-title-logo a { content: url("MY IMAGE FILE NAME"); height: 60px } </style>
  3. Hi, I see icons here? DId you solve problem?
  4. Hi, Add same icon or diferrent icons? Add icon on top/bottom/left or right of text?
  5. Hi, Try adding this to Design > Custom CSS #fullscreenBrowser .slideshow>.slide:nth-child(n+4) { display: none !important; }
  6. Hi, Can you take some screenshot of cake and pastry?
  7. Hi, Your site is private. Can you setup password & share url again? We can check easier
  8. No. See how to setup access password. https://beaverhero.com/squarespace-how-to/#How_to_Setup_Password_Share_Site_URL
  9. Hi, You mean links in bottom of page? https://york-demo.squarespace.com/apprentice-branding
  10. Add to Design > Custom CSS @media screen and (max-width:640px) { div#mobileBar { top: 0; bottom: unset; } div#headerAnnouncementWrapper { margin-top: 40px; } }
  11. #1. Update new code. You can check it again If it works, let me know, I will check other questions
  12. Add to Design > Custom CSS /* Summary arrows */ .summary-carousel-pager.sqs-gallery-controls>span { border: 1px solid black; overflow: visible; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous::before, .sqs-gallery-design-carousel .sqs-gallery-controls .next::before { color: red; }
  13. Hi, I don't see these cards on homepage? Which page are you referring to?
  14. @astpaul Hi. Do you still need help on this? I think this is possible with your current plan.
  15. Add to Design > Custom CSS /* Mobile Footer Order */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1630780782396_9645+.row { display: flex; flex-direction: column; } /* image */ div#block-yui_3_17_2_1_1630780782396_9645+.row .span-6 { order: 1; } /* top links */ div#block-yui_3_17_2_1_1630780782396_9645+.row .span-3:first-child { order: 2; } /* bottom links */ div#block-yui_3_17_2_1_1630780782396_9645+.row .span-3:last-child { order: 3; } }
  16. If you share link to page where you have problem, we can help easier
  17. Hi, What is access password? We can check problem easier --- You can also use Accordions Tab Plugin or use this free tool to add FAQ Accordion Dropdown.
  18. Have you solved it yet? Also, if you want to create map with multiple pins, you can use Advanced Map Block
  19. Hi, 2 options to do this O1. Use JavaScript code to move social icons into nav (Need a Business Plan or higher) O2. Use FontAwesome to add icons via Link Item in Pages > Main Navigation (Support All Plans) Which option do you prefer?
  20. Try adding a Code Block <div class="container tcontainer"> <section data-bgcolor="#bcb8ad" data-textcolor="#032f35"> <div> <h1 data-scroll data-scroll-speed="1"><span>Horizontal</span> <span>scroll</span> <span>section</span></h1> <p data-scroll data-scroll-speed="2" data-scroll-delay="0.2">with GSAP ScrollTrigger & Locomotive Scroll</p> </div> </section> <section id="sectionPin"> <div class="pin-wrap"> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2> <img src="https://images.pexels.com/photos/5207262/pexels-photo-5207262.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt=""> <img src="https://images.pexels.com/photos/3371358/pexels-photo-3371358.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt=""> <img src="https://images.pexels.com/photos/3618545/pexels-photo-3618545.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt=""> </div> </section> <section data-bgcolor="#e3857a" data-textcolor="#f1dba7"><img src="https://images.pexels.com/photos/4791474/pexels-photo-4791474.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> <h2 data-scroll data-scroll-speed="1" class="credit"><a href="https://thisisadvantage.com" target="_blank">Made by Advantage</a></h2> </section> </div> <link rel="stylesheet" href="https://use.typekit.net/skn8ash.css"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css"/> <script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); const pageContainer = document.querySelector(".container"); /* SMOOTH SCROLL */ const scroller = new LocomotiveScroll({ el: pageContainer, smooth: true }); scroller.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y; }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: pageContainer.style.transform ? "transform" : "fixed" }); //////////////////////////////////// //////////////////////////////////// window.addEventListener("load", function () { let pinBoxes = document.querySelectorAll(".pin-wrap > *"); let pinWrap = document.querySelector(".pin-wrap"); let pinWrapWidth = pinWrap.offsetWidth; let horizontalScrollLength = pinWrapWidth - window.innerWidth; // Pinning and horizontal scrolling gsap.to(".pin-wrap", { scrollTrigger: { scroller: pageContainer, //locomotive-scroll scrub: true, trigger: "#sectionPin", pin: true, // anticipatePin: 1, start: "top top", end: pinWrapWidth }, x: -horizontalScrollLength, ease: "none" }); ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll ScrollTrigger.refresh(); }); </script> and add this to DESIGN > CUSTOM CSS /* CSS test code */ .tcontainer { section:not(#sectionPin) { min-height: 100vh; width: 100%; position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 2rem; padding: 50px 10vw; margin: auto; place-items: center; } img { height: 80vh; width: auto; object-fit: cover; } h1 { font-size: 5rem; line-height: 1; font-weight: 800; margin-bottom: 1rem; position: absolute; top: 10vw; left: 10vw; z-index: 4; overflow-wrap: break-word; hyphens: auto; } @media (max-width: 768px) { h1 { font-size: 16vw; } } h1 span { display: block; } h2 { font-size: 2rem; max-width: 400px; } .credit { font-family: Termina, sans-serif; } .credit a { color: var(--text-color); } * { box-sizing: border-box; } #sectionPin { height: 100vh; overflow: hidden; display: flex; left: 0; background: var(--text-color); color: var(--bg-color); } .pin-wrap { height: 100vh; display: flex; justify-content: flex-start; align-items: center; padding: 50px 10vw; } .pin-wrap > * { min-width: 60vw; padding: 0 5vw; } p { position: absolute; bottom: 10vw; right: 10vw; width: 200px; line-height: 1.5; } }
×
×
  • Create New...