Check out my Codepen project here
Here is the HTML code for my personal website:
<div id="splash" class="divider">
<h1 class="text-center text-uppercase">vincent/rodomista</h1>
<p class="text-center text uppercase">Full Stack Web Developer</p>
</div>
And this is the CSS styling:
#splash {
background: gray;
height: 75%;
}
#splash h1 {
margin-left: auto;
margin-right: auto;
font-size: 6em;
color: white;
margin-top: 10%;
}
#splash p {
font-size: 5em;
color: white;
}
.divider {
width: 100%;
padding: 0;
margin: 0;
height: 60%;
display: table;
}
I've been working on creating a simple personal website to practice my CSS skills, but I'm facing an issue. When I resize the screen to medium or small, the first div on the page appears longer than the others below it. I suspect this is due to the text not being wrapped properly. Any tips or advice on how to fix this would be greatly appreciated.