Issues with my portfolio

Please help me figure out why my contact section is all over the place.

  1. the contact (word) is still white no matter what color I put.
  2. it looks like the form under that section is in a column but i didn’t set it up that way and I do not know how to fix it.

https://codepen.io/Mackdine/pen/abbEZjL?editors=1100

thanks in advance

I don’t see any color property for contact, but I’ve noticed that in your menu list contact link is the only one that differs from the others (missing # in the href)

<a href="#home">Home</a>
<a href="#portfolio">Portofolio</a>
<a href="#about">About</a>
<a href="contact">Contact</a>

You mean that all the elements are on a single row?
If so, that’s the default browser layout for input element:

display: inline-block

Hope this helps :+1:

Please help.

https://codepen.io/Mackdine/pen/abbEZjL?editors=1100

No matter what I do my form is not centered and the elements inside are all over the place. Also, if you could, explain to me why I cannot see the last inches of the right side of my page?

(if you want to answer) Ps: you’re probably an expert and Im kinda new at this. Did you ever have that kind of issue? (or im just not cut out for this).

I have some notes in no particular order:

  • almost all the sections have a fixed height (es project height: 500px).
    What happens if your content is bigger than that?
    You’ll end up having a layout that overlaps on each other.

  • contact > h1#title inherits the h1 values of color white and 300px od padding top.
    Maybe that’s why you cannot see the heading, is white on white.

  • inside your form some rows have class row others have class rowTab, maybe that’s a reason why they behave differently.


All in all my best suggestion is to get accustomed to working with the browser’s developer tools.
right click -> inspect element
will open the Elements tab, over there you can see clearly how each element is rendered and which property is applied to.
It’s a great tool :+1:

1 Like

Hi @Mackdine,

As @Marmiz has mentioned, you have the height of the ‘projects’ section set to a fixed 500px. And it looks like the content inside it exceeds that height. You might as well remove that height attribute from its style.

You have set the color of h1 tag to be white in the CSS. I guess it is for the Hi there! I'm Diana Mackaya line. But the same CSS will be applied for all the H1 tags in your page. Hence you can use classnames to write CSS rules for specific tags.

Did you ever have that kind of issue? (or im just not cut out for this).

I am absolutely sure that 99% percent of the developers would have faced such issues in the beginning. It’s a part of learning to code. When you rectify this, you’ll learn it and you will not do it again which I think is the best way to learn. You are in the right track. Just keep going and you’ll be great one day!

1 Like

thank you so much Raga. I’ll keep going

You should change the class in here <div class="contact"> to <div id="contact"> or at least make it <div class="contact" id="contact"> in order to be able to navigate from the menu <a href="#contact">Contact</a> to the contact section.

You also need to match the href in <a href="#portfolio">Portofolio</a> with the id in <section id="projects"> :slight_smile:

1 Like