smithandrew1993 Posted February 11, 2021 Share Posted February 11, 2021 Site URL: https://stratarc.co.uk Hi, I'm looking to decrease the space at the top of my code block with an animated scroll indicator. This is the code: <div class="bottom"> <a class="scroll-indicator" href="#tscroll"></a> </div> <style> .bottom { position: absolute; bottom: 1; width: 100%; left: 50%; transform: translateX(-50%); text-align: center; } .scroll-indicator { display: inline-block; width: 24px; height: 24px; margin: 16px auto; border-right: 2px solid #fff; border-bottom: 2px solid #fff; border-bottom-right-radius: 2px; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-name: fade; animation-name: fade; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; } @-webkit-keyframes fade { 0% { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 1; } 75% { -webkit-transform: rotate(45deg) translateY(-6px) translateX(-6px); transform: rotate(45deg) translateY(-6px) translateX(-6px); opacity: 0; } 100% { opacity: 0; } } @keyframes fade { 0% { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 1; } 75% { -webkit-transform: rotate(45deg) translateY(-6px) translateX(-6px); transform: rotate(45deg) translateY(-6px) translateX(-6px); opacity: 0; } 100% { opacity: 0; } } </style> Any help appreciated! Link to comment
tuanphan Posted February 14, 2021 Share Posted February 14, 2021 Add to Design > Custom CSS /* Scroll indicator top padding */ div#block-yui_3_17_2_1_1611938327538_5437 { padding: 5px !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment