Two different portfolio project questions

Two different portfolio project questions
0

#1

So, I need help with two factors.

I’ve been trying to pushing the last thumbnail away from my footer a few pixels by targeting the margins. Using:

footer {
margin: 25px;
}

does not give me the results I want. What can I do to push the images upwards away from my footer?

Secondly, what do I need to research to discover how to accomplish this user story:
I navigate to different sections of the webpage by clicking buttons in the navigation.
How do you do this by scrolling?


#2

Currently your margin is set to 25px. First, I tried changing the footer margin. That did’nt work. Then I inspected the height of the nearest element. That is the section element. The section element was a height of 0. So the margin in footer is working properly but not giving you the desired result because the div you are trying to move has a height of 0. Then I searched for why section has a height of zero. I started by looking at the section element first child element ul. The ul element also had a height of 0. Here is a hint to figure out the rest of the issue.
Hint:
Found your issue in this SO, stack overflow, article about why div height is zero.

I googled and found two articles that should help you implement this feature. This article by w3c on smooth scrolling or this article on scrolling. Both implementations require that you use jQuery. You can add jQuery to your codepen. Change the javascript settings, located in the top corner in the javascript section of the editor.


#3

Its happening because you have floated the ul children. Thats why the #gallery has collapsed. To fix this first you have to apply CSS Clearfix to the #gallery. If you add a border around around the #gallery, it will be easy for you to work. Then delete the border later.

#gallery:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

The you can apply margin-bottom to #gallery.