The circular image is of position: relative and has been moved up using the bottom: 90px property. Image of current situation:
The CSS for the two <h1> tags below are also provided. Is this some caveat of the relative positioning property?
It's acting as if its boundaries are where the position is without the relative position change.
This is what it looks like without the relative re-positioning:
What gives?
CSS: (header is the wrapper, paper-title is the bigger h1, name is the text (h4), and picture is the circular picture.)
I'm trying to place the headers right below the image borders without having to make them position relative.
.content-header {
//height: 200px;
width: inherit;
text-align: center;
background-color: #547980;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
border-bottom: solid #9DE0AD 4px;
}
.content-picture {
display: inline-block;
border-radius: 100%;
height: 150px;
width: 150px;
position: relative;
bottom: 80px;
border: 8px solid white;
}
.Paper-Title {
font-size: 5vw;
text-align: center;
padding-top: 10px;
margin: 0px;
padding: 20px 20px 0px 20px;
color: #9DE0AD;
}
.Name {
text-align: center;
font-size: 2.7vw;
margin: 0px;
width: 100%;
padding: 10px 0px 20px 0px;
color: #9DE0AD;
font-weight: lighter;
}
