There are elements that adapt to different resolutions, so I limited the dimensions of the functions to min and max, but I also have an offset from the left edge also in percent, how to limit it? So that after a certain page size, it stops mixing and remains in the same position no matter how much it is reduced. He also stopped at the maximum and did not increase at high resolutions.

#rectanglePN { width: 13.6842105%; min-width: 187px; max-width: 260px; height: 17px; background: green; border-radius: 5px; position: absolute; top: 140px; left: 16.9%; min-left: 170px; /* Несуществующее свойство */ }

    1 answer 1

    Cases when the layout changes depending on the resolution of the device are usually solved using media queries .

    That is, we first set the usual rule:

     #rectanglePN { /*остальные свойства*/ left: 16.9%; }

    Then the rules for all sorts of "abnormal" sizes and types of devices:

     @media all and (max-width: 1000px) { #rectanglePN{ left: 170px; } } @media all and (min-width: 1470px){ #rectanglePN{ left: 250px; } }