ZyphenVisuals / zyphens-now-playing

24 stars 8 forks source link

move .scrolling away from image #1

Closed Nerxxy closed 1 year ago

Nerxxy commented 2 years ago

I wanna make a gap between the song and artist name when its scrolling like it is when its static, if u know what I mean?

ZyphenVisuals commented 2 years ago

As per the demo, the gap between the Artist text and Song text shouldn't change when it's scrolling.

Could you please attach images of the issue you're referring to?

Nerxxy commented 2 years ago

https://user-images.githubusercontent.com/37718547/157063817-6b7bd7fd-c24b-4b23-a949-a2837405df67.mp4

as seen here its right up against the cover image

where as here theres a gap

Nerxxy commented 2 years ago

if u look carefully even in your demo the scrolling text rides up against the cover image its just the sides of your image were black so it gives the illusion that there is a gap

Nerxxy commented 2 years ago

any update on this?

not trying to rush just curious

ZyphenVisuals commented 2 years ago

I'm not currently at home.

Being a student, it may take a while for me to respond. I have noted the issue and will look into it.

Nerxxy commented 2 years ago

ah ok no worries, thank you for looking into it

Nerxxy commented 2 years ago

just checking in :)

Nerxxy commented 2 years ago

Hey @ZyphenVisuals I fixed my issue, I added a "squarediv" div in the Song.html:

body> div id=bigdiv> img id=image> img id=image2 src="Snip_Artwork.jpg"> div id=squarediv>

div id=smalldiv> p id=artist>

br> p id=song>

/div> /div> /body>

(Had to remove < because it made the text look like a missing image)

Then in the SongStyle.css I added:

squarediv {

width: 10px; height: 70px; background-color: inherit; position: relative; top: -74px; left: 67px; padding: 0px; z-index: 1; }

I also made it so that it inherits the background colour of the #bigdiv so no need to change the Editor.html.

I also had to change #smalldiv "margin-top" to -144px because when I added #squarediv it nudged #smalldiv down for some reason? Idk.

Anyways if you wish to add it as an update as is or work on it a little to make it better feel free.

Here's the edited files

I'm not good at html or css so there might be somethings that I've done wrong but as far as I know it works flawlessly right now.

Thanks for your work and good luck with school mate.