Vinoir
-
Posts
19 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by Vinoir
-
Spacing suddenly changed all over our website! :(
Vinoir replied to loggie24's topic in Site Design & Styles
No prob, will drop them a message -
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?
-
Spacing suddenly changed all over our website! :(
Vinoir replied to loggie24's topic in Site Design & Styles
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? 😞 -
Text Block Background Color Suddenly Broken, Colors Suddenly All Changed
Vinoir replied to NowWhat's topic in Pages & Content
It's suddenly happened to mine as well and thrown everything off? Any suggesstions? -
Text Block Background Color Suddenly Broken, Colors Suddenly All Changed
Vinoir replied to NowWhat's topic in Pages & Content
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
-
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'
-
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>
--
-
Fill on mobile and fit on screen? Please help!
Vinoir replied to Vinoir's topic in Customize with code
Grateful for any help! -
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> --
-
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!
-
Grateful for any advice on this? Even making it light grey or subtle? Ideally I'd take it off just to see.
-
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?
-
Thanks, is there a way to disable or mute it? Really messes up the look and design!
-
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!!
