Q:

How to implement min left/right in css

I have an element in my css which look like below
.xyz{
    position:absolute;
    left:50%;
    }

Now as expected when I reduce the width of browser window, this element moves towards left. However I want it to stop at a certain point since otherwise it starts overlapping other elements. In principle, this is very similar to min-height and and min-width properties. But there is no such property like min-left or min-top. How can I implement this.

A:

If you can estimate the window size, where the movement should stop, (let's say 700px) you can use media queries:
@media (max-width: 700px) {
  .xyz {
    left: 10px;
  }
}

Then for windows narrower than 700px, the element is placed fixed at left: 10px (adapt CSS as suited for you).

