Having trouble with portfolio website project

1

I am currently working on the portfolio project and I am having some serious trouble.

I figured I would kind of build out the template for the site and then go back through and add all my content/style it.

I got through the template side of things pretty easily, but I am having serious trouble with positioning anything where I want it to go. One example is that I have a box on the very first page with a welcome note and is also where I will add the links to my social media accounts. I was able to make the box and get the first headline in there no problem, but I can’t for the life of me get it to center inside the page its on. I actually get get it to move vertically at all.

this is the code that I have it in. I know I am missing something, but I have tried adding other divs to center it inside and nothing seems to work. Does it have something to do with it being inside a “section” instead of a

?? Any help would be great! I am pulling my hair out over here.

Welcome to CMH Designs

this is the css for the block and heading

h1 {
margin-top: 5px;
font-family: Arvo;
display: block;
color: white;
text-align: center;
margin: 0px;
padding-top: 0px;
}

.block {
background-color: #36454F;
opactiy: .85;
width: 75%;
height: 25%;
margin: 0px auto;
opacity: .85;
border: solid black 0px;
border-radius: 10px;
}

2

When posting, make sure to enclose your inline code in single backticks (`your code here`) and block code in triple backticks:
```
your code here
```
Otherwise you’ll get formatting problems.

You’ll need more elements than this if you want to center anything vertically. Try adding a container with height set to 100vh (100% of the viewport height), then you have a point of reference within which to center other things.

Also, your CSS for .block contains a spelling error for opacity.

1 Like
3

Take a look at this.

2 Likes
4

Thanks for the link, that was a great explanation!

5

Thanks for the info, that helped me out quite a bit!

6

Hello,

This is what I mostly use at my job and it helped me a lot many times. Do test it on all possible browsers. I used to have some problems on Safari every now and then. It is considered a good approach as it doesn’t rely on absolute positioning and it is easier to control from a responsive point of view.

Hope it helps. Good luck. :slight_smile:

1 Like