Fixing the about link button (CSS)

[Darkcodelab]

Made the about-link button's position relative to the viewport

[netlify]

✔️ Deploy Preview for sleepy-lamport-26cf4e ready!

🔨 Explore the source changes: a1c2e36

🔍 Inspect the deploy log: https://app.netlify.com/sites/sleepy-lamport-26cf4e/deploys/61f50589a126f100072768f9

😎 Browse the preview: https://deploy-preview-4--sleepy-lamport-26cf4e.netlify.app/

[bushblade]

Hi @Darkcodelab
Do you have a reproduce-able example of this please?
A few students have mentioned there is an issue here but so far I have not been able to reproduce it myself.

[Darkcodelab]

Hi @bushblade
Yeah here's what I did, I've added a bunch of feedback and when I scroll down, the about-link button is not sticking to the bottom of the page.

[bushblade]

Thanks for that, yes I see the issue.
I'm not sure the fix you suggest is the best one though as then the link would appear over the top of the feedback cards and with them having the same background color as the icon color you wouldn't be able to see it.
So I think the best solution would be not to use position: fixed as that takes it out of the document flow and instead change...

.about-link {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: #fff;
  cursor: pointer;
}

.about-link a {
  color: #fff;
}

to

.about-link {
  display: flex;
  justify-content: flex-end;
}

.about-link a {
  color: #fff;
  cursor: pointer;
}

That way the div stays at the bottom all the time and so over the purple background and stays visible.

[bushblade]

I added a fix to the bugfix branch.
We will update that branch for now with all bug fixes and then merge and keep an originalcoursecode branch so as students will still have reference to the code they see in the course.

[Darkcodelab]

Good point bushblade. Thanks for the update