Jump to content

WillMyers

Circle Member
  • Posts

    75
  • Joined

  • Last visited

Personal Information

Recent Profile Visitors

1,253 profile views
  1. Hey @JoeGrossmann, happy to help out here. Try this bit of Custom CSS: /*Input Container*/ #page .ProductItem-details-checkout .product-quantity-input { display: grid !important; grid-template-columns: 1fr 1fr; align-content: center; column-gap: 17px; } /*Quantity Text*/ .ProductItem-details .quantity-label{ grid-column: span 2; } /*Price Text Container*/ #page .ProductItem-details-checkout .ProductItem-product-price { margin: 0; } /*Price Text*/ #page .ProductItem .ProductItem-details .product-price { margin: 0; } Here's a quick video going over how I got to this if you or anyone else is curious: https://www.loom.com/share/6e6bcb18bd3a459cbe49068caafe6548?sid=6f5ec74b-c9c5-413c-8cc4-9fb3dc2c171c
  2. Hi Will,

    I've used your code snippet for gallery transitions and I'm now trying to add an image pan. This is what I've hacked together but I'm kinda clueless on keyframes. The "pan" is working on screen, but I don't know how to add a fade inbetween each image transition. I just want the images to scroll/pan slowly and fade/transition to the next image...continuously.

    the site is ljla.squarespace.com, pw:LJLA

     

    .gallery-fullscreen-slideshow-list {
      overflow: hidden;
    }
    .gallery-fullscreen-slideshow-item {
    scale: 1.1;
    }

    #sections .gallery-fullscreen-slideshow[data-transition="fade"] {
      --duration: 10s;
      figure,
      .gallery-fullscreen-slideshow-item-src{
        opacity:1;
      }
      .gallery-fullscreen-slideshow-item{
        visibility: visible;
      }
      figure:last-child {
        animation: fadeIn var(--duration, 5s) ease;
      }

      @keyframes fadeIn {
          90% {
        transform: translate3d(-80px, 0px, 0px);
      }

      100% {
        transform: translate3d(-60px, 0px, 0px);
      }
      }
    }

  3. Hey gang, I took a stab at a different solution and it seems to be working on my end. Check out the CSS below if you're using Slideshow Full, I also have some CSS in an article here if you're using Slideshow Simple -- it's the same idea with a few small tweaks. Basically I'm using CSS animations instead of transitions. Seem to work better since the slides are getting moved around in the DOM. Watch this if you're curious. Let me know if there are any issues, I'll keep iterating as I can. Will /** * Slow Cross Fade * Gallery Type » Slideshow Full * From Will-Myers.com **/ #sections .gallery-fullscreen-slideshow[data-transition="fade"] { --duration: 2s; figure, .gallery-fullscreen-slideshow-item-src{ opacity:1; } .gallery-fullscreen-slideshow-item{ visibility: visible; } figure:last-child { animation: fadeIn var(--duration, 2s) ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } }
  4. @DotcomMarket Keep the CSS in the Custom CSS area, that should work as normal. You can place the JavaScript in a Markdown Block somewhere in a section in your Footer area though and that should work.
  5. Thanks @paul2009! @jorgeamrls, my mega menu plugin is one of my most popular ones. It can’t recreate the mobile menu exactly as drop-downs, as you have shown, but it follows the normal Squarespace structure on mobile where you can click into the folder and you can display your mega menu content there. If you have any questions at all you can contact us via my support page too.
  6. Thanks @Ziggy! @Nikolas361, if you're interested. I have an article here about the different types of Comments you can use in the different areas: https://www.will-myers.com/articles/adding-comments-to-your-code-in-squarespace
  7. Happy to help, what page do you have this installed on? I'll need to look there to help troubleshoot. Feel free to submit a ticket here as well if you'd like: will-myers.com/ask
  8. I've noticed this in the backend due to the way to way URL's get addended to the URL, but smooth scrolling has always worked on the live site. Is smooth scrolling not working on your live site?
  9. Hey @MarianaGR, I just put together a tutorial on this. Check it out here: https://www.will-myers.com/articles/perfect-anchor-links-in-squarespace
  10. What aboutttttt This? /*Card Flip Effect*/ .image-block .sqs-block-content{ perspective: 2000px; } .design-layout-poster { position: relative; transition: transform 0.8s; transform-style: preserve-3d; perspective: 1000px; } .image-block:hover .design-layout-poster { transform: rotateY(180deg); } .design-layout-poster .intrinsic{ z-index:0; } .design-layout-poster figcaption{ z-index:1; } .design-layout-poster .intrinsic, .design-layout-poster figcaption{ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .design-layout-poster figcaption{ transform: rotateY(180deg); background:black; /*Add if Needed*/ /*border-radius: 20px;*/ }
  11. Ok Try this bit of code instead. You will probably want to change the background from black. /*Card Flip Effect*/ .image-block .sqs-block-content{ perspective: 2000px; } .design-layout-poster { position: relative; transition: transform 0.8s; transform-style: preserve-3d; perspective: 1000px; } .design-layout-poster:hover { transform: rotateY(180deg); } .design-layout-poster .intrinsic, .design-layout-poster figcaption{ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .design-layout-poster figcaption{ transform: rotateY(180deg); background:black; /*Add if Needed*/ /*border-radius: 20px;*/ }
  12. Can you share a link to the site you're trying to do this on?
  13. @cwilk180 Yup! @tuanphan is right, this can be styled through CSS.
  14. hey @tuanphan, thanks for the recommendation. It's not possible invert mine, that would require a different HTML setup, but that's pretty cool and a good idea for a future plugin! @cwilk180, if your end up getting my plugin and have any questions let me know!
×
×
  • 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.