Как заставить элементы останавливаться при перемещении при изменении размера окна после использования процента

Итак, у меня есть divs, которые у меня есть на моей веб-странице.. как заголовок или div-боксы. Они настраиваются на большие размеры экрана, чтобы они не выглядели слишком маленькими на большом мониторе, но проблема в том, что когда я изменяю размер в окне или в браузере, чтобы сделать его маленьким, все элементы перемещаются, пока они не достигнут точки, где все они встречаются, и она становится уродливой. Как я могу сделать так, чтобы divs, которые я настраивал для большего размера экрана, стал больше, но затем остановить их от перемещения вместе с окном при изменении размера окна, делая его меньше??? Я использовал проценты из всех элементов, которые я хочу скорректировать, и увеличиваю их на больших/более широких экранах.

Ниже приведен пример моего кода. Мой заголовок и другие элементы с этими классами перемещаются в точку, где они перекрываются при изменении размера окна

.header{
        position:absolute;
        top:0px;
        width:100%;
        height:100px;
        left:0;
        background:#EB6A4A; 
    }

    .slogan{
        position:absolute;
        top:60%;
        left:40.5%;
    }

    .login{
        position:absolute;
        top:15%;
        left:90%;
    }

        .whitebackground{
        background:#FFFFFF;
    }

Ответы

Ответ 1

Я не уверен в вашем вопросе, потому что вы не опубликовали какой-либо код, но я думаю, что ваше решение может использовать стиль css:

max-width:50%;
min-width:800px;
max-height:500px;
min-height:21%;

свойства в пикселах или пикселях, как вы предпочитаете, поэтому вы можете рассказать divs о том, насколько расширяются и насколько они становятся меньше.

Надеюсь, что это поможет, если вы разместите свой код, возможно, я могу быть более полезным.

Привет

ИЗМЕНИТЬ 1:

Это должно решить вашу проблему:

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: inherit;

}
.header{
        position:relative;
        float:left;
        top:0px;
        width:100%;
        height:100px;
        left:0;
        background:#EB6A4A; 
    }

    .slogan{
        position:relative;
        float:left;
        top:60%;
        left:40.5%;
    }

    .login{
        position:relative;
        float:left;
        top:15%;
        left:90%;
    }

        .whitebackground{
        background:#FFFFFF;
    }

Просто сделайте то же самое с классом, который вы не разместили в css. Идея состоит в том, что все элементы с относительной позицией и плавающие слева, чтобы они не двигались. Должен работать!