Personal portfolio - styling form

1

Hi there,

Here is my crazy looking personal portfolio page draft (ignore the nonsense content :slight_smile: I’m just trying to build it and get it operational.

The last thing I added was for a contact form and used HTML and CSS from a code donating webpage. It’s really basic and I contained it in a div with a class of ‘form-style’ in the hope I could size it / move it etc and style it further.

I next added an h2 header saying ‘Contact me’ in the form-style divs parent div called ‘contact’. Even though ‘contact’ div has a display of flex the h2 header just butts up on the left hand side of the form when I really wanted it above the form.

I tried giving form-style a top margin. I also tried to style ‘contact h2’ and align centre but nothing will budge!

Does anyone have any suggestions why this seems so tricky to move around?

Thanks
Joceline x

2

Oops! forgot to ad link to my portfolio page…

3

in your css file … remove these: style type=“text/css”> and </style … also remove display: flex from div with class contact.
then
.contact h2 {
text-align: center;
width: 100%;
}

4

If you want to use flex, don’t forget flex-direction: column.

5

Thank you so much! A perfect fix! :slight_smile:

6

Thank you very much!

This is helpful. I’m still trying to get my head around Flex :slight_smile:

7

glad I could help. it seems you’re overthinking it. keep it simple. just focus on getting your divs where you want them. they are just boxes !