I want to make something like the this header design:
So far I got what I want, but I am running into a problem with scaling; my grid (the option I went with) does a pretty good job at positioning the items where I want it:
However as of right now the contents are positioned from top to bottom, and I used margins (top / bottom with vw) to adjust the height of things and this doesn't work well if you change the aspect-ratio of the page. when you do that the contents shift, either up or down, and don't align with the background image anymore (which has position absolute and is an element on its own).
I have the following code:
What I'd like to achieve is my grid split in 2. Sections 1 and 2 at the top of the img and sections 3, 4 and 5 at the bottom (like the reference has). And it has to keep its position when you change the aspect ratio. Whats the best way of doing this?
#storyMiddle {
grid-column: 2;
text-align: center;
display: grid;
grid-template-rows: 1fr 1fr min-content min-content min-content;
}
#storyMiddle>img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
height: 75vh;
width: 75vh;
object-fit: cover;
opacity: 0.7;
z-index: 0;
-webkit-mask-image: var(--gradient);
mask-image: var(var(--gradient));
-webkit-mask-size: 100%;
mask-size: 100%;
}
#storyMiddle>#middleTitle {
grid-row: 1;
font-family: anton;
font-size: 4vw;
letter-spacing: 0.1vw;
text-align: center;
z-index: 1;
}
#storyMiddle>#subtitle {
grid-row: 2;
font-family: antonio;
font-size: 1vw;
letter-spacing: 0.1vw;
text-align: center;
z-index: 1;
}
#storyMiddle>#middleDash {
grid-row: 3;
color: var(--text);
width: 10%;
height: 0;
margin-top: 11vw;
z-index: 1;
}
#storyMiddle>#viewItem {
grid-row: 4;
background-color: rgba(0, 0, 0, 0);
border: var(--accent) solid 1px;
width: 55%;
height: 4vw;
display: block;
margin: auto;
font-family: antonio;
letter-spacing: 0.1vw;
font-size: 0.9vw;
margin-top: 1vw;
z-index: 1;
}
#storyMiddle>#pagination {
grid-row: 5;
margin-top: 1vw;
}
#pagination>hr {
color: var(--text);
background-color: var(--text);
display: inline-block;
width: 30%;
z-index: 1;
position: relative;
height: 3px;
border: none;
cursor: pointer;
}<div id="storyMiddle">
<img src="https://images.unsplash.com/photo-1661841952798-b1c52d41467e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80">
<div id="middleTitle">Old Man</div>
<div id="subtitle">From Finland</div>
<hr id="middleDash">
<button id="viewItem">go to post</button>
<div id="pagination">
<hr id="2" class="bar">
<hr id="3" class="bar">
<hr id="1" class="bar">
</div>
</div>