CSS trouble shoot

Hi all,

I’m trying to build a nice information website for my brother in law about his carpentry whilst putting the skilss learnt on codecademy into practice.

I’ve got a few sticking points where I’m not sure hwo to adjust the code to get what I want.
The images in the gallery won’t sit in the center of the space given to them
The contact form keeps sitting on top of the footer, or not being able to be seen at all.

Here’s my codepen link if anyone can take a look and give suggestions that would be great carpentry project

Hi there,

I’d really like to go step-by-step at looking at the problems you’re having with your CSS, but before going too in-depth, there are some things that I noticed. The <section> that holds all of your images has the class name of “gallery” as well as the <div>s that contain your images. I would recommend giving one of those tags its own unique class name.

Another thing I noticed is that while the layout of this website is very simple, the CSS is unnecessarily complicated. All of your sections are positioned with absolute (which if you remember, removes them from the flow of the website) which may be the biggest issue giving you problems. There are also some selectors overriding others (e.g., div.gallery and .gallery)

Try looking over your CSS to see if anything could be simplified or streamlined. But if you are still having problems or would like to ask specific questions, I would love to help you out further.


Thank you so much for the pointers,

I will go back through and try to make it more streamlined, should I be using position: fixed or position: relative for the sections?

Thanks again

Remember that position: fixed removes an element from the flow of the document, and the other elements shift according to that. With what you’re trying to accomplish, I don’t believe you need to use anything–save for your header and footer–other than the box model.