How to make line stay the same?
Is there anyone who can help?
I have made a list, in the middle it is connected with 'see photo'
I have put this together with CSS in such a way that it fits nicely on certain widths of screens. But if it differs a bit from screen width, it's dead. As you see in photo. How can I make sure that these lines ALWAYS stay the same??
This is my html:
<div class="lijn m-auto d-flex justify-content-center"><img width="50" height="50"src="Circle"></div>
This is my css:
.lijn::before {
content: "";
display: inline-block;
position: absolute;
width: 50px !important;
left: 49.3% !important;
top: -42% !important;
}
.lijn::after {
content: "";
display: inline-block;
position: absolute;
width: 50px !important;
left: 44.3% !important;
top: 138% !important;
}
The image is just the circle. Where I then put 2 lines in front and behind. On mobile these will be placed under each other so it will just run.
2 Replies
.lijn {
position: relative;
width: 465.12px;
left: -100%;
}
.lijn img {
z-index: 1;
transform: rotate(66deg);
}
.lijn::before {
content: "";
display: inline-block;
position: absolute;
width: 100%;
height: 2px;
background-color: #1F4858;
right: -5.5%;
top: 50%;
}
.lijn::after {
content: "";
display: inline-block;
position: absolute;
width: 100%;
height: 2px;
background-color: #1F4858;
left: -5%;
top: 50%;
}
I changed to this. Is works, only the width of the line must be exact as the height of the row. How can I do that?
If you could set up a codepen with the code it would make it easier for somebody to help you.