сделайте поля фиксированными с обеих сторон (слева/справа)

#css #margin

Вопрос:

Как я могу сохранить размер поля фиксированным с обеих сторон даже после уменьшения окна просмотра?

Так что уменьшится только размер изображения.

перед уменьшением окна просмотра:

перед уменьшением окна просмотра

после уменьшения окна просмотра:

после уменьшения окна просмотра

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    font-family: 'Dosis', sans-serif;
}

body {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: minmax(480px, 33.3vw) 33.3vw 33.3vw;
    background-color: #fdfdfd;
}

.text {
    background-color: #6544d9;
    grid-column: 1;
}

.image {
    grid-column: 2 / 4;
    background: url('https://i.stack.imgur.com/0vKiZ.png') no-repeat;
    background-size: contain;
    background-position: center;
    margin: 100px;

}

     <section class="text"></section>
    <section class="image"></section>

1. маржа: возможно, авто?

2. Можете ли вы привести воспроизводимый пример? Трудно точно сказать, в чем проблема с тем, что вы предоставили.

3. @TannerDolby надеюсь, это поможет

Ответ №1:

Проценты (%) и rem являются относительными единицами, но px является абсолютной единицей. Формулировка вашего вопроса была немного запутанной, но если вы хотите, чтобы поле оставалось абсолютно одинаковой ширины, используйте px для поля. Если вы хотите, чтобы поле автоматически адаптировалось к размеру окна просмотра, используйте % или rem, оба из которых относятся к относительному размеру элемента к его корню.