Advolton Posted October 25, 2021 Share Posted October 25, 2021 Site URL: http://mikeyscriven.com Hello, I was looking to hopefully get some help with my Squarespace website, recently, I added a bouncing code icon using "Codeblock" and Custom CSS, however, as seen here: https://mikeyscriven.com/about the loading icon bounces between the 2 sections of my website where the background changes from black to gray. I would ideally like a way of adding that loading icon in the middle of the 2 sections (between the black and gray sections). I've tried multiple times to make this happen, sadly, I'm not great at coding and can't figure out how to make this possible. So please post some code below for me to try if you know anything. Thanks. Link to comment
Wolfsilon Posted October 25, 2021 Share Posted October 25, 2021 Hello, You can do this is you take the code you currently have and remove it from it's own section. Then add the code block to the hero section above (black section) and position the element at the bottom of the section. The animation will now play at the bottom of the black section, just before the gray section begins. It will be easier for you to position the element between the two sections if it isn't in its own section, because each section by default has a preset amount of padding, heights, margins,..etc. Link to comment
Advolton Posted October 25, 2021 Author Share Posted October 25, 2021 6 minutes ago, Wolfsilon said: Hello, You can do this is you take the code you currently have and remove it from it's own section. Then add the code block to the hero section above (black section) and position the element at the bottom of the section. The animation will now play at the bottom of the black section, just before the gray section begins. It will be easier for you to position the element between the two sections if it isn't in its own section, because each section by default has a preset amount of padding, heights, margins,..etc. Hi, Thanks for the fast response to my thread, however, the text on the about page is in a list, and therefore I can't add a section to add code, only edit the list items. Any ideas what I can do to resolve this? Link to comment
Wolfsilon Posted October 25, 2021 Share Posted October 25, 2021 In that case: section[data-section-id="617705f2693a3a0bfb1abe17"] { min-height: 100%; .page-section > .content-wrapper { padding-top: 0 !important; padding-bottom: 10vmax !important; } } You should then try and change the positioning by adjusting the padding-top or padding-bottom values. Link to comment
Advolton Posted October 25, 2021 Author Share Posted October 25, 2021 5 minutes ago, Wolfsilon said: In that case: section[data-section-id="617705f2693a3a0bfb1abe17"] { min-height: 100%; .page-section > .content-wrapper { padding-top: 0 !important; padding-bottom: 10vmax !important; } } You should then try and change the positioning by adjusting the padding-top or padding-bottom values. I added the code you sent, please see here: https://gyazo.com/9856603e10030602462252fbf5422dce It didn't seem to do anything though? It's still bouncing in the same place. Might I add, I do really, really appriciate you trying to help me with my code, I'm very grateful, thank you Wolfsilon. Mike. Link to comment
Wolfsilon Posted October 25, 2021 Share Posted October 25, 2021 section[data-section-id="617705f2693a3a0bfb1abe17"] { .content-wrapper { padding-top: 0 !important; padding-bottom: 8vmax !important; } .page-section { min-height: 100% !important; } } Let's try breaking down the code then. Try this. Link to comment
Advolton Posted October 25, 2021 Author Share Posted October 25, 2021 20 minutes ago, Wolfsilon said: section[data-section-id="617705f2693a3a0bfb1abe17"] { .content-wrapper { padding-top: 0 !important; padding-bottom: 8vmax !important; } .page-section { min-height: 100% !important; } } Let's try breaking down the code then. Try this. So, it seems to have worked by changing the "padding-bottom" to 300-500 instead of 8. It's positioned correctly as shown here: https://gyazo.com/3bafd0399b9aa850795a09c72b6f953e That's kind of where I'd like it to be, sort of, maybe a little higher, but now it's caused a really big space between my next element.. such as this: https://gyazo.com/71df7dfed7ddc98ffe51629ce60c0efd and it goes down for quite a while.. I'm not really sure on how to keep it in that position, but then also have the section after it right below the loading bouncer. Any ideas? Link to comment
Advolton Posted October 25, 2021 Author Share Posted October 25, 2021 https://gyazo.com/5b237199980df00126a68e83defb182b It also seems to work setting them both to 0 now for some reason? It's in the right position and takes away a large gap from before, but there's still a big space between the sections, I would like it to be right below the loading bouncer ideally... Link to comment
Wolfsilon Posted October 25, 2021 Share Posted October 25, 2021 (edited) Okay now, instead of using ".page-section" for you min-height. Apply the min-height to the section itself instead. section[data-section-id="617705f2693a3a0bfb1abe17"] { min-height: 100% !important; } Edited October 25, 2021 by Wolfsilon Code Link to comment
Advolton Posted October 25, 2021 Author Share Posted October 25, 2021 5 minutes ago, Wolfsilon said: Okay now, instead of using ".page-section" for you min-height. Apply the min-height to the section itself instead. section[data-section-id="617705f2693a3a0bfb1abe17"] { min-height: 100% !important; } Here's the latest - https://gyazo.com/c9edffabe55e2a489b5196b8a23e5738 Link to comment
Wolfsilon Posted October 25, 2021 Share Posted October 25, 2021 section[data-section-id="617705f2693a3a0bfb1abe17"] { .content-wrapper { padding-top: 0 !important; padding-bottom: 8vmax !important; } min-height: 100% !important; } I should've specified that it should be outside of the "}" for content-wrapper. Like the code above. Link to comment
Advolton Posted October 25, 2021 Author Share Posted October 25, 2021 Sorry I did that last code wrong, I've fixed it now, it seems to have worked thankfully!https://gyazo.com/7ddfc025a21b2a1187cf449b2e3c9496 The only problem I have now is that I would like the arrow moving up a slight little bit so that it ends on the black bit, going onto the gray section. Do you have any idea how to nudge the arrow a little more up, I've tried editing the margins and everything and it doesn't seem to move it anymore, soon as it's a little more up, it should be perfect. Thanks for all the help you've given me, I'm honestly really thankful! Link to comment
Wolfsilon Posted October 25, 2021 Share Posted October 25, 2021 You could adjust your arrow positioning by editing the position of the arrow to a negative value. like - "-200%" or something. That's something within your animation code that you'll need to change. Link to comment
Advolton Posted October 25, 2021 Author Share Posted October 25, 2021 10 minutes ago, Wolfsilon said: You could adjust your arrow positioning by editing the position of the arrow to a negative value. like - "-200%" or something. That's something within your animation code that you'll need to change. I can't figure out what to edit, here's the code: } .arrow{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .arrow span{ display: block; width: 30px; height: 30px; border-bottom: 5px solid #fff; border-right: 5px solid #fff; transform: rotate(45deg); margin: 10px; animation: animate 1.8s ease infinite; } @keyframes animate { 0%{ opacity: 0; transform: rotate(45deg) translate(-20px,-20px); } 50%{ opacity: 1; } 100%{ opacity: 0; transform: rotate(45deg) translate(20px,20px); } } section[data-section-id="617705f2693a3a0bfb1abe17"] { min-height: 100% !important; .content-wrapper { padding-top: 0 !important; padding-bottom: 0vmax !important; } } What would I change to position it a little further up? Link to comment
Wolfsilon Posted October 25, 2021 Share Posted October 25, 2021 I'd add a negative value the top property for the "arrow" CSS Link to comment
Advolton Posted October 25, 2021 Author Share Posted October 25, 2021 12 minutes ago, Wolfsilon said: I'd add a negative value the top property for the "arrow" CSS I just tried adding negative value (-) to all of the propertys that had a number, it didn't seem to move it at-all, isn't there any code or anything to just move it up a tiny bit? I literally just need the arrow to end on the black line before the gray of the second part? I'm sorry that I'm taking up so much of your time. I'll vouch you after this for your on-going problem solving, I know it's not easy and it's annoying, but I really am glad to have the support of an amazing community. Cheers. Link to comment
Advolton Posted October 26, 2021 Author Share Posted October 26, 2021 This post currently isn't resolved. If anyone has any ideas on how to move the arrow further up the screen please let me know. Thanks. Huge thanks to @Wolfsilonthough for practically doing everything up-to this point, it's really appriciated, I've made huge progress because of this person! 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