I would suggest using JavaScript since I don’t think something like this can be accomplished just with CSS. Check out this snippet I created.
NOTE: I had to use 20px from the top of the div because if I used 10px the text would get inside the image.
I am attempting to position my ‘.store’ class 10px above my #linkplaceholder div and my ‘.lastseen’ class 10px below my #linkplaceholder div. Is this possible?
I would imagine this could be done with position absolute & relative, but when I change my #linkplaceholder to position: absolute, it is no longer centered horizontally like it should be. Also, the #linkplaceholdering div’s size needs to stay dynamic at 20% of the viewport like it is.
Currently I just have the ‘.store’ and ‘.lastseen’ classes positioned by giving store a top margin percentage and lastseen a bottom margin percentage in order for you to see the idea I’m going for. These are sometimes in the general area of where they need to be, but on different devices they can be way off. That’s why I need store to be positioned exactly 10px above and last seen to be positioned exactly 10px below so this is fixed and always accurate.
JSFiddle showing my code: https://jsfiddle.net/1ms9fk63/
body {
background: black;
}
#container {
background-color: black;
z-index: 0;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
#linkplaceholder {
margin: 0 auto;
z-index: 10000000;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20%;
}
#linkplaceholder img {
width: 100%;
}
.store {
top: 0;
margin-top: 21.5%;
}
.lastseen {
bottom: 0;
margin-bottom: 21.5%;
}
.lastseen, .store {
position: absolute;
width: 100%;
text-align: center;
}
.lastseen a, .store a {
font-family: neue-haas-grotesk-text, sans-serif;
color: #ffffff;
font-weight: 400;
font-style: normal;
list-style: none;
text-align: center;
text-decoration: none;
font-size: 15px;
}
.lastseen a:hover, .store a:hover {
text-decoration: underline;
} <div id="container">
<div id="linkplaceholder">
<a href="/">
<img src="images/image.svg" alt="" />
</a>
</div>
<div id="navcontainer">
<div class="store"><a href="/store">STORE</a></div>
<div class="lastseen"><a href="/last-seen">LAST SEEN</a></div>
</div>
</div>Cool, thank you! This route could work if the links were able to still be positioned correctly even after the viewport is resized. I’m noticing that they remain static after resizing. Additionally, I’m noticing that it looks like visually there is much more space between ‘LAST SEEN’ and the image compared to ‘STORE’ and the image. Do you know why this is? Line height issue?
You can either use
Do you think something like this (
@JohnSmith I’ve created another snippet: jsfiddle.net/sfjc1oL2/1. There seems to be an unknown modifier because if I don’t move the
@JohnSmith You can also try this: