0
307
ViewsIs there a way to detect if a screen size is an even or odd number so that I can base a css rule on the outcome?
I am currently working on my portfolio website and I have noticed that I have a line on the home page that moves by 1 pixel based on the screen size being an even or odd number.
If the Display width is an odd number like 1141px the line is centered. If it is 1140px it is no longer centered.
Here is the css that is causing the issue
&:before {
content: '';
display: block;
position: absolute;
top: calc(-3.5rem - 1px);
left: calc(50% - #{_size(border-width) * 1});
width: _size(border-width);
height: calc(3.5rem + 1px);
background: _palette(border);
}
Specifically it is this line:
left: calc(50% - #{_size(border-width) * 1});
Website is: https://www.Kyle-Richey.com
The Line in question is the vertical line at the bottom of the page between the menu and horizontal line.
The First image is of an even display width and the line is off center, the second is an odd display width and the line is center.
Ideally I would write some code that would change the css rule based on the display width being even or odd if that is possible.
1 answers
Answer question0
It's possible that the calculation left: calc(50% - #{_size(border-width) * 1}); is resulting in a percentage of a pixel and that get's rounded up or down to the nearest pixel causing the miss alignment.
Not knowing what #{_size(border-width) is doing it's hard to give an exact answer.
but swapping left: calc(50% - #{_size(border-width) * 1}); to left: calc(50% - 0.5px); appears to fix the issue in my quick test in Chrome.