Jump to content

CherryTree

Member
  • Posts

    15
  • Joined

  • Last visited

Everything posted by CherryTree

  1. Did you ever figure out how to do this? I would like to do the same thing on my site.
  2. Site URL: http://www.cherrytreeinteriordesign.com I'm wondering if there is a way to make a simple list with cards and make the cards themselves clickable to another page (I use 7.1). I'm aware you can add buttons, but I don't like the way they look. I want it to look more or less like the attached picture. Thanks!
  3. I checked by taking out that code, and in fact that is what is causing it to flip on mobile. I added an accordion for the additional information and removed the above code, and that seems to be making it look the way I want. Thanks so much for helping me make the additional info smaller!
  4. That part worked! But on the mobile, it's still switching spots. I'm wondering if it has something to do with the other code I have in there: /*move product description*/ <script> jQuery(document).ready(function($) { $('.ProductItem .ProductItem-additional').insertAfter('.ProductItem-details-excerpt'); }); </script>
  5. Site URL: http://www.cherrytreeinteriordesign.com I I'm having a couple issues with the product page. 1. I'd like to change the font of the additional information section to be smaller than the product information section. How do I do this? 2. When I switch to mobile view, the product information and additional information sections switch places. I'd like to keep the additional info section below the product info. Thanks in advance!
  6. Site URL: http://www.cherrytreeinteriordesign.com I have a js code that animates the header on all but my mobile pages. The code is as follows: <script> if (document.documentElement.clientWidth <740) { window.location = "/mobile"; } </script> <script> (function(){ window.addEventListener('load', function() { var headerElements = document.querySelectorAll('header a') function fadeIn(element, time, delay) { var keyframes = {opacity: [0,1]}; var timing = { duration: time, fill: 'both', easing: 'ease', delay: delay }; element.animate(keyframes, timing) } function animateElements(element,animation,time,delay) { element.forEach((item,index) => { var delays = index*delay; item.style.display = 'inline-block'; animation(item,time,delays) }) }; //Call animateElements function and set your timing and delay. animateElements(headerElements,fadeIn,2000,300); }) })() </script> I also have css animation for text that pops up on the home screen. I have it basically timed out to pop up when the header animation is complete, but depending on the load it is sometimes a bit off. (You can see it on my homepage on a desktop). I'm not sure if there is a way to point the css animation code to begin when the js code animation starts. The css code is here: .fade-in-text { display: inline-block; font-family: FuturaPT, Helvetica, sans-serif; font-weight: 800; letter-spacing: 0.4em; text-align: center; font-size: 6em; color: white; opacity: 0; animation: fadeIn linear 300ms; animation-delay: 5650ms; -webkit-animation: fadeIn linear 300ms; -webkit-animation-delay: 5650ms; -webkit-animation-fill-mode: forwards; -moz-animation: fadeIn linear 300ms; -moz-animation-delay: 5650ms; -moz-animation-fill-mode: forwards; -o-animation: fadeIn linear 300ms; -o-animation-delay: 5650ms; -o-animation-fill-mode: forwards; -ms-animation: fadeIn linear 300ms; -ms-animation-delay: 5650ms; -ms-animation-fill-mode: forwards; } @keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-moz-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-webkit-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-o-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-ms-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } Anyone have any idea how to do this? Thanks!
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.