Prevent links extending beyond image and into the margins? How to keep footer to stay at bottom of the page?

1

I wrapped two images “contact and projects” and “contacts” in < a > tags to redirect it to a part of the page, but the link extends into the white space. How do I prevent that?

Secondly, when you bring the browser height down, the footer moves up, and the rest of the body collapses in on itself as well, I’ve tried and failed trying to fix it on my own.

footer looks fine on git hub page >>> https://rbhogal.github.io/FCC-Personal-Portfolio/

footer moves up on codepen >>> https://codepen.io/rbhogal/pen/dyGbdZd

2
  1. Switch the styles around. Set the size and placement on the link and just let the image adjust to the container.
#welcome-section a {
  display: block;
  width: 325px;
  margin-left: auto;
}

#projects-contact-sign-img {
  width: 100%;
  display: block;
  transition: box-shadow .3s ease 0s;
}
  1. Try looking at the page on Codepen in Debug mode, “Change View” > “Debug mode”. The footer should look the same as on the Github page.
3

  1. Yes thank you! That fixed the issue with the links!

  2. Actually my question was really how do I get the footer to just stay at the bottom when the browser window height gets smaller?

edit: I realized the body overlaps because obviously I set the viewport height to be 100. and I don’t have the content scale down with changes. But really my issues was the footer not staying down, that’s not set to be 100vh.

4

You can try using min-height instead of height on welcome-section and projects.

5

Damn I didn’t think of that. Thank you!

1 Like