I can’t figure this out:
https://jsfiddle.net/3q1o8dpr/2/
.heart {
position: relative;
width: 138px;
}
[class*="heart-piece-"] {
position: absolute;
top: -5px;
width: 10px;
height: 10px;
border-radius: 5px;
}
.heart-piece-0 {
left: 0;
height: 30px;
top: -15px;
background-color: #0059dd;
}
.heart-piece-1 {
left: 16px;
height: 60px;
top: -31px;
background-color: #0059dd;
}
.heart-piece-2 {
left: 32px;
height: 80px;
top: -37px;
background-color: #0059dd;
}
.heart-piece-3 {
left: 48px;
height: 90px;
top: -31px;
background-color: #0059dd;
}
.heart-piece-4 {
left: 64px;
height: 94px;
top: -23px;
background-color: #0059dd;
}
.heart-piece-5 {
left: 80px;
height: 90px;
top: -31px;
background-color: #0059dd;
}
.heart-piece-6 {
left: 96px;
height: 80px;
top: -37px;
background-color: #0059dd;
}
.heart-piece-7 {
left: 112px;
height: 60px;
top: -31px;
background-color: #0059dd;
}
.heart-piece-8 {
left: 128px;
height: 30px;
top: -15px;
background-color: #0059dd;
}
<div class="curtain ">
<div class="heart ">
<div class="heart-piece-0"></div>
<div class="heart-piece-1"></div>
<div class="heart-piece-2"></div>
<div class="heart-piece-3"></div>
<div class="heart-piece-4"></div>
<div class="heart-piece-5"></div>
<div class="heart-piece-6"></div>
<div class="heart-piece-7"></div>
<div class="heart-piece-8"></div>
</div>
</div>
Like this? https://jsfiddle.net/kem7sL3d/2/
or would it be done a different way?
And, is there a way to keep it centered in the middle?
.flex-container {
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.heart {
position: relative;
font-size: 0;
width: 138px;
}
<div class="curtain ">
<div class="flex-container ">
<div class="heart ">
<div class="heart-piece-0"></div>
<div class="heart-piece-1"></div>
<div class="heart-piece-2"></div>
<div class="heart-piece-3"></div>
<div class="heart-piece-4"></div>
<div class="heart-piece-5"></div>
<div class="heart-piece-6"></div>
<div class="heart-piece-7"></div>
<div class="heart-piece-8"></div>
</div>
</div>
</div>
In the middle of what exactly? The curtain , the document or the viewport?
If you meant the viewport and don’t want it to scroll with the document then change relative to fixed on the .heart element. Or change relative to fixed on the .flex-container but you would also need inset: 0 0 0 0; on that one as well.
I want it to stay in the middle of the curtain.
https://jsfiddle.net/7e86qd3L/
I want the heart image to stay centered as a whole.
That doesn’t look right.
.flex-container {
width: 100%;
height: 100%;
position: fixed;
inset: 0 0 0 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.heart {
position: relative;
font-size: 0;
width: 138px;
}
Can I put the heart inside a box that is 138px by 108px height and keep it centered on the curtain?
It is perfectly centred. If you add a border you will see a single line that is perfectly centred in your curtain. The problem is that the blue bars are all offset by different mounts so there is no reasl center in that box the way it is designed.
I suggest you just add a height to .heart until it centres.
e.g.
.heart {
position: relative;
font-size: 0;
width: 138px;
height: 25px;
}
Just adjust that 25px until you are happy.
That will work when the curtain changes to different dimension sizes based on the browser window?
That isn’t going to work.
What I want to do is place the heart image inside a border box and then center that on the curtain.
Is this able to be done?
Here’s my box: https://jsfiddle.net/hk42Lxfb/2/
How do I keep the heart in the box?
I can’t figure this out.
The box is centered in the middle.
How do I then move the heart inside the box?
.flex-container {
width: 100%;
height: 100%;
position: fixed;
inset: 0 0 0 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.heart {
position: relative;
font-size: 0;
width: 137px;
}
.box {
position: relative;
font-size: 0;
width: 137px;
height: 107px;
outline: 1px solid red;
}
<div class="curtain ">
<div class="flex-container ">
<div class="heart ">
<div class="box ">
<div class="heart-piece-0"></div>
<div class="heart-piece-1"></div>
<div class="heart-piece-2"></div>
<div class="heart-piece-3"></div>
<div class="heart-piece-4"></div>
<div class="heart-piece-5"></div>
<div class="heart-piece-6"></div>
<div class="heart-piece-7"></div>
<div class="heart-piece-8"></div>
</div>
</div>
</div>
</div>
There’s no point unless you actually want that border around the shape?
If so then change the individual top position of each heart piece.
Starting from piece-0 - to piece-8 then the top values for each in px would be this:
21,6,0,7,12,7,0,6,21
I could make the border invisible?
Then you don’t need to change all the positions as I already gave you the answer for the borderless heart.
Each bar in the heart is offset with a fixed px measurement so all you needed to do was use a height on the wrapper to match the offset which was around 25px. I’m not sure why you put a border around it if you don’t want one.
1 Like
I did it: https://jsfiddle.net/ubqj8o5c/5/
126px space top
.heart {
position: relative;
font-size: 0;
width: 137px;
height: 33px;
}
Can font-size: 0; be deleted?
Is there a reason why that is in the code?
It doesn’t effect the code if I remove it.
It can be deleted when you have a height.
It was probably needed to collapse the height to zero but if you have a height now then its not needed. I’m guessing the original author wanted the heart vertically centred at the middle of the smallest line which is more aesthetically pleasing to my mind for a heart shape than at absolute middle.
It was an animation code that I removed the animation from.
Well that exactly proves my point and you can see the animation single line is at the point I mentioned.
When I hit run in the fiddle:
The heart moves from left to right.
You can visually see it.
Small screen: up & down
Desktop: right to left.
How do I prevent that? https://jsfiddle.net/uz79kreo/2/
Removing this from the code fixes it:
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
I created an html page, it occurs on there also.
It’s probably because on smaller screens you have a scrollbar appearing which means the vertical position is shifted by the width/height of the scrollbar when the player is inserted.
asasass:
It occurs on desktop also.
Yes but only when the screen is small enough to trigger a scrollbar. Which happens prematurely when your player loads as your exit button causes a scrollbar.
If you add this as a test:
button{
display:none!important;
}
I don’t see any jump with that added unless the screen is smaller than the player to start with.
Is it fine for me to delete position and inset: 0 0 0 0;?
This fixes it.
https://jsfiddle.net/6gLzv2oq/3/
.flex-container {
width: 100%;
height: 100%;
/*position: fixed;
inset: 0 0 0 0;*/
display: flex;
justify-content: center;
align-items: center;
}
.heart {
position: relative;
font-size: 0;
width: 137px;
height: 33px;
}
