Jump to content

Vinoir

Circle Member
  • Posts

    19
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Vinoir's Achievements

  1. I don't undersand what Squarespace has done! There is huge padding everywhere that can't be removed? Live looks awful but in design its fine?
  2. It's caused chaos with three sites that were about to go live! it urgenty needs fixing as everything is way off with the padding and spacing!!! Any ideas what is going on? ūüėě
  3. It's suddenly happened to mine as well and thrown everything off? Any suggesstions?
  4. In the last few hours, despite not touching anything, all my squarespace sites have got extra padding put in around text boxes, which means they are now all misaligned and the site looks terrible? Any ideas how to fix this? Below is an example of how it should be and how it's appearing. On design mode, it looks right, but when previewing or live, it's way out? The site margin is set to 3, and teh images are fine but all the text boxes are compressed and squashed in width? Grateful for any help as it's kinda urgent! thanks
  5. Wondering if you can help!

     

    I need to create a simple white solid shape arrow (a long triangle) that bobs up and down and fades in and out. The shape i'd like this for is the first image below. I found one on these forums that is more of a 'v' shape, now I'd like one that is a solid white triangle that has the same effect.

    Hoping someone can help me, would be massively grateful. It's to invite people to scroll down in a nice discreet way that fits with the page design.

    Here's the code I found that I'd like something similar for this new arrow.

    --

     

    <div class="scroll-down2"></div>
    <style>
      .scroll-down2 {
        position: absolute;
        left: 50%;
        bottom: 10px;
        display: block;
        text-align: center;
        font-size: 20px;
        z-index: 100;
        text-decoration: none;
        text-shadow: 0;
      width: 10px;
      height: 10px;
      border-bottom: 8px solid white;
      border-right: 8px solid white;
      z-index: 9;
      left: 50%;
      -webkit-transform: translate(-50%, 0%) rotate(45deg);
      -moz-transform: translate(-50%, 0%) rotate(45deg);
      transform: translate(-50%, 0%) rotate(45deg);
        -webkit-animation: fade_move_down 4s ease-in-out infinite;
        -moz-animation:    fade_move_down 4s ease-in-out infinite;
        animation:         fade_move_down 4s ease-in-out infinite;
    }


    /*animated scroll arrow animation*/
    @-webkit-keyframes fade_move_down {
      0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
      50%  { opacity: 1;  }
      100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
    }
    @-moz-keyframes fade_move_down {
      0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
      50%  { opacity: 1;  }
      100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
    }
    @keyframes fade_move_down {
      0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
      50%  { opacity: 1;  }
      100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
    }
    </style>

    --
    this is the correct arrow shape i'd like to 'animate with code'

    Screenshot 2023-10-05 at 17.35.39.png

    Screenshot 2023-10-05 at 17.35.49.png

  6. Wondering if you can help!

     

    I need to create a simple white small solid shape arrow (a long triangle) that bobs up and down and fades in and out. The shape i'd like this for is the first image below. I found one on these forums that is more of a 'v' shape, now I'd like one that is a solid white triangle that has the same effect.

    Hoping someone can help me, would be massively grateful. It's to invite people to scroll down in a nice discreet way that fits with the page design.

    Here's the code I found that I'd like something similar for this new arrow.

    --

     

    <div class="scroll-down2"></div>
    <style>
      .scroll-down2 {
        position: absolute;
        left: 50%;
        bottom: 10px;
        display: block;
        text-align: center;
        font-size: 20px;
        z-index: 100;
        text-decoration: none;
        text-shadow: 0;
      width: 10px;
      height: 10px;
      border-bottom: 8px solid white;
      border-right: 8px solid white;
      z-index: 9;
      left: 50%;
      -webkit-transform: translate(-50%, 0%) rotate(45deg);
      -moz-transform: translate(-50%, 0%) rotate(45deg);
      transform: translate(-50%, 0%) rotate(45deg);
        -webkit-animation: fade_move_down 4s ease-in-out infinite;
        -moz-animation:    fade_move_down 4s ease-in-out infinite;
        animation:         fade_move_down 4s ease-in-out infinite;
    }


    /*animated scroll arrow animation*/
    @-webkit-keyframes fade_move_down {
      0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
      50%  { opacity: 1;  }
      100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
    }
    @-moz-keyframes fade_move_down {
      0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
      50%  { opacity: 1;  }
      100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
    }
    @keyframes fade_move_down {
      0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
      50%  { opacity: 1;  }
      100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
    }
    </style>

    --

    Screenshot 2023-10-05 at 17.35.39.png

    Screenshot 2023-10-05 at 17.35.49.png

  7. Hello, can anyone help me create a simple white solid shape arrow (a long triangle) that bobs up and down and fades in and out. The shape i'd like this for is the first image below. I found one on these forums that is more of a 'v' shape, now I'd like one that is a solid white triangle that has the same effect. Hoping someone can help me, would be massively grateful. It's to invite people to scroll down in a nice discreet way that fits with the page design. Here's the code I found that I'd like something similar for this new arrow. -- <div class="scroll-down2"></div> <style> .scroll-down2 { position: absolute; left: 50%; bottom: 10px; display: block; text-align: center; font-size: 20px; z-index: 100; text-decoration: none; text-shadow: 0; width: 10px; height: 10px; border-bottom: 8px solid white; border-right: 8px solid white; z-index: 9; left: 50%; -webkit-transform: translate(-50%, 0%) rotate(45deg); -moz-transform: translate(-50%, 0%) rotate(45deg); transform: translate(-50%, 0%) rotate(45deg); -webkit-animation: fade_move_down 4s ease-in-out infinite; -moz-animation: fade_move_down 4s ease-in-out infinite; animation: fade_move_down 4s ease-in-out infinite; } /*animated scroll arrow animation*/ @-webkit-keyframes fade_move_down { 0% { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; } } @-moz-keyframes fade_move_down { 0% { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; } } @keyframes fade_move_down { 0% { transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { transform:translate(0,10px) rotate(45deg); opacity: 0; } } </style> --
  8. Hello! I have a screen size image that I want to show full as a fit in screen mode and slightly cropped in mobile (so not full width). Is there a way to allow that image to be 'fill' in mobile and 'fit' in screen? I'm on 7.1 and using fluid! Hoping someone can help!
  9. Grateful for any advice on this? Even making it light grey or subtle? Ideally I'd take it off just to see.
  10. Hello, in my 7.1 carousels, when flicking through the images i see a big black box outline. Appreciate this is for accessibility but it's really clashing with the design and ruining the experience. Any code to disable it to see how that looks?
  11. Thanks, is there a way to disable or mute it? Really messes up the look and design!
  12. Hello, Hoping someone can help. I’m really struggling with the arrows on squarespace’s galleries. We’ve a 7.1 site and we’re trying to make it easy to click through a gallery left and right on a keyboard. And also making the arrows less imposing. Basically something like this kjphotos.com as reference. does it make a difference doing gallery blocks or sections? also not sure where we exactly we would add code in 7.1. grateful for advice!!
√ó
√ó
  • 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.