I’ve been working on a project outside of the FFC projects. I’m developing a landing page for a tech organization. There are some issues I’m running into. I’ve commented what my issues are. I’ve been working on projects all weekend, so I think I’m in “too deep” to see the answer. Right now I’m using only HTML and CSS as I’m really not that familiar with JS. As my skills grow, I will add more functionality to the document.
I think the image overflows bcz the padding property you gave to it.
You might want to add the padding to the header element instead like this:
and then rearrange you design on this.
Or you might use media queries to reduce the width property of the #header-img on small screen like this
The numbers in the screenshot are just examples, you can use your browser to know at which width of the view port you want to change the width of the #header-img.
By adding some media queries you can make the image responsive as you want.
Making progress! Any additional feedback? I need to work on the placement of the “Sign Up Free” and “Support the Cause” sections. And I am still working on the mobile-friendly aspect of the document. https://codepen.io/ktruesdell/pen/NEoemZ