gracemoore Posted March 26, 2022 Share Posted March 26, 2022 Site URL: https://www.gracemooreyoga.com/new-home Page Password: ADMIN I am using code (see below) to add the scroll down arrow as displayed in the image, however on mobile devices the code is not quite centred. How can I get the arrow to be displayed exactly in the centre of the page on mobile? The code I am using is: <div class="scroll-down"></div> <style> .scroll-down { position: absolute; left: 50%; bottom: 10px; display: block; text-align: center; font-size: 20px; z-index: 100; text-decoration: none; text-shadow: 0; width: 20px; height: 20px; border-bottom: 1px solid white; border-right: 1px 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 2s ease-in-out infinite; -moz-animation: fade_move_down 2s ease-in-out infinite; animation: fade_move_down 2s 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> Any help would be greatly appreciated! TIA 😊 Link to comment
tuanphan Posted March 29, 2022 Share Posted March 29, 2022 It looks like space between left of screen - arrow & arrow - right of screen is equal? Have you tried checked it yet? gracemoore 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
gracemoore Posted April 6, 2022 Author Share Posted April 6, 2022 On 3/29/2022 at 9:04 AM, tuanphan said: It looks like space between left of screen - arrow & arrow - right of screen is equal? Have you tried checked it yet? Yes - I fixed it, thankyou! 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