Day 34: March 25, 2019

Today’s Progress: Personal Portfolio Webpage Project Pt. 5 (FCC)

Thoughts: Day five of work on my final project for the responsive web design section on freeCodeCamp.
Requirements and an example here.

Progress, Progress, Progress!

First successful coding solution for the day came with me solving my footer issue. Yesterday, I talked about how I’d managed to get it to stay down using the position to relative and margin-top to 700px. Today I found a better solution that not only keeps it in place, but gives my project a super cute gift box sort of look.

Super. Cute.

To achieve this, I first set the position of the footer to fixed and set the position to 0. But that by itself wasn’t enough to fix everything. It kept the footer in place, but also covered part of my content.


To fix this, I ended up adding a padding-bottom of 150px to the container that held the items. This pushed them up just enough to avoid crashing into the footer.

Much better.

Another point I worked on today was getting my mobile version to look decent. I figured with this being a responsive project, I should strive for it to look and respond well on as many devices as possible. For the most part, things were looking fine on my iPhone. However, the banner would not behave.

Why u do me this way?

My answer to this problem turned out to be putting in a media query.

like so.

So now when the screen is smaller than the max width of 600px, you get a different, correctly sized banner.

sort of correctly sized.

I need to play around more with the sizing, but I’m sure you get the idea.

Key Takeaways From Day Thirty-Four:

  • The whole changing images with a media query thing never crossed my mind. It’s several hours later and I’m still mind-blown.
  • Before you get super upset about fonts check google fonts to see if the one you used in your image is there. (It was.)

Link To Project: N/A

Leave a Reply

Your email address will not be published. Required fields are marked *