keep element consistent across different device sizes.
In this we create a media query to handle this, ensuring the element stays within a 1920px wide layout on larger screens. Here’s a CSS solution for your case:
.element { position: absolute; right: 70px; } @media screen and (min-width: 1920px) { .element { right: calc((100vw - 1920px) / 2 + 70px); } }
Explanation:
On screens smaller than 1920px, the element will be positioned with right: 70px.
On screens wider than 1920px, the media query calculates the extra space outside of 1920px using calc((100vw – 1920px) / 2) and adds the 70px to keep the element within the bounds of a 1920px-wide layout. This keeps the element consistent across different device sizes.
Example:
We use this style in cases where an element, like a close (cross) icon in a popup, needs to remain within a specific layout width (e.g., 1920px), even if the popup itself has a width of 100%. For example, when the popup is opened on wider screens, like 3K displays, the close icon will stay restricted within the 1920px width, keeping its position consistent across different screen sizes. Meanwhile, the popup can still span the full width of the screen.