У меня есть сетка 1x4, которая выглядит так.
Проблема в том, что при расширении экрана кнопки иногда обрезаются, а когда этого не происходит, они слишком растягиваются по горизонтали.
Я хотел бы настроить сетку 1x4, чтобы она стала 2x2, когда не хватает места по вертикали.
Я знаю, что это возможно с помощью гибких контейнеров, но мои попытки понять, как это сделать, терпят неудачу.
Это моя кодовая ручка:
https://codepen.io/TheNomadicAspie/pen/ZEKYwWJ
И это соответствующий код:
.multiple-choice {
}
.answer-1 {
grid-rows: 1/2;
display: grid;
grid-template-columns: 20% 80%;
height: 98%;
}
.answer-2 {
grid-rows: 2/3;
display: grid;
grid-template-columns: 20% 80%;
height: 98%;
}
.answer-3 {
grid-rows: 3/4;
display: grid;
grid-template-columns: 20% 80%;
height: 99%;
}
.answer-4 {
grid-rows: 4/5;
display: grid;
grid-template-columns: 20% 80%;
height: 99%;
}
.checkbox {
grid-columns: 1/2;
max-height: 90%;
background-image: url('checkbox_unchecked.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.button-container {
grid-columns: 2/3;
height: %;
padding-left: 5%;
}
.button-container button {
width: 100%;
}
.button {
display: inline-block;
height: 100%;
text-decoration: none;
background: black; /*Button Color*/
color: #f5f5f5;
border-bottom: solid 4px #f5f5f5;
border-radius: 3px;
font-family: hack;
font-size: 1.5rem;
font-size: clamp(1rem, 3vw, 2rem);
padding-left: 5%;
padding-right: 5%;
padding-top: 2%;
padding-bottom: 2%;
}
.btn:active {
/*on Click*/
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px); /*Move down*/
border-color: black; /*disappears*/
}
Вот для чего нужны медиа-запросы.
Однако я не понимаю, как мне определить медиа-запрос, когда для кнопок недостаточно места по вертикали? Я знаю, как сделать медиа-запрос, если размер экрана имеет определенный размер или даже если ориентация горизонтальна. Но иногда кнопки обрываются, даже если экран чуть-чуть растянуть по горизонтали. Я думал, что контейнер всегда будет оставаться в пределах вертикальной границы, потому что я определяю высоту в процентах?
не совсем уверен, что вы делаете, display:grid и auto-fill должны делать codepen.io/gc-nomade/pen/YzVXxRv
Спасибо, это то, что я пытался сделать, но основная проблема заключается в том, что при изменении размера все еще есть размеры экрана, при которых кнопка обрезается внизу, прежде чем она изменится на 2x2. Это из-за значений зажима? Я предполагаю, что нет способа справиться с этим динамически без указания значений vw и vh? Во всем своем коде я пытался использовать процентные значения, чтобы избежать свисания элементов с края экрана, но нижняя часть этой кнопки постоянно обрезается, когда мне действительно нужно, чтобы она имела постоянный запас. Это проблема с моим кодом или нет способа избежать этого?
Я бы отказался от % и начал со 100vh в вашем основном контейнере и использовал сетку или гибкость на каждом уровне, таким образом, вам не придется беспокоиться о % , fr(fraction) подойдет для сетки. Пройдите первый уровень, затем под. Не уверен, что исправление необходимо. делать . margin можно превратить в отступ от родителя.
Спасибо за совет, но недавно я перестроил весь свой CSS, чтобы избежать использования 100vh, из-за ошибки/функции, при которой использование 100vh не учитывает панель навигации на мобильных устройствах. Есть несколько исправлений для этого с использованием PostCSS. Я никогда не мог работать, поэтому я вернулся к использованию %. Использование fr для сетки — отличный совет, о котором я не знал, но я ценю это.