<meta name="viewport" content="width=device-width">
content="width=device-width"
. В таком случае ширина вьюпорта будет равна ширине экрана устройства.width=device-width
), т.е. 320px. Когда ты устанавливаешь ограничение на минимальную ширину тела документа, равную, например, 480px, то по дефолту у тебя будет горизонтальный скролл при зуме равном 1. Это логичное поведение, заложенное в спеке. Это как пытаться посмотреть сайт с ограничение в 1600px в ширину с ноутбука, там тоже будет горизонтальный скролл. Используя flexbox и делая все по PP приходится отказываться от justify-content, и использовать костыли в виде margin чтобы подогнать под макет, в свою очередь это здорово мешает при адаптации под меньшие разрешения, приходится постоянно перебивать размеры margin, с justify-content и flex-wrap адаптировать по сути и не надо оно само адаптируется но не подходит под PP c расхождением до 50-70 пикселей.
.custom-control-input:checked ~ .custom-control-label::before { ... }
.a ~ .b
выбирает все элементы с классом .b, следующие за элементами с классом .a (на одном уровне дома). С помощью данной фишки можно исхитриться и делать много интересных вещей без js: слайдеры, выпадающее меню, реализовать любую логику, зависящую от двух состояний..button {
fz: 1em; // default
p: 0.5em 0.75em;
lh: 1.25;
&--small {
font-size: 0.75em;
}
}
.button--small
, то 75% шрифта родителя и все значения пересчитаются соответствующим образом.::-webkit-scrollbar
;* ::-webkit-scrollbar {
display: none;
}
* ::-webkit-scrollbar {
display: block;
background-color: hsl(240, 100%, 50%);
}
position: absolute;
относительно родителя со свойством position: relative;
- это заложенное в логику рендеринга поведение. Вы пытаетесь сломать то, что работает так, как задумано. Попробуйте положить мяч на наклонную поверхность и попросите гравитацию перестать работать, чтобы мяч не покатился вниз..child:nth-child(1) { color: red; }
не окрасит ни один элемент, по той причине, что ни один .child элемент не является первым в списке сбилнгов; однако, .child:nth-child(4) { color: red; }
окрасит самый первый элемент с классом .child в приведенном ТС примере, т.к. он является 4 элементов в списке своих сиблингов. (() => {
const elements = document.getElementsByClassName('child');
const rec = (arr) => {
if(!arr.length) return;
const [even, odd, ...rest] = arr;
even.setAttribute('style', 'color: red');
return rec(rest);
}
rec(elements);
return;
})();
.shake {
display:block;
width: 90px;
height: 90px;
border: 5px solid transparent;
border-radius: 100%;
background-image: url(http://xn----8sbacs4bcidfthwu.xn--p1ai/wp-includes/images/call-img.png);
background-repeat: no-repeat;
background-size: cover;
box-sizing: border-box;
}
.shake:hover {
border: 5px solid hsl(0, 100%, 50%);
}
key=value&key2=value2...
?kek=&results=<your_text>
к целевому пути<form action="/targetPage.html" method="GET">
<input name="kek" hidden>
<input type="text" name="results" value=""> // здесь нужно будет ввести текст
</form>
.card
.card__info
.card__info-more
.card__info:hover ~ .card__info-more { display: block };
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
#buttom {
position: relative;
}
#top {
position: relative;
}
class="top"
и class="bottom"
.top {
position: absolute;
width: 60%;
right: 0;
}
.bottom {
position: absolute;
bottom: 0;
}
<!-- Для примера на моем фидле использовано именно такое значение.
Вообще соотношение ~ равно 5,2 к 1, расчитать можете его делением ширины на высота
(или наоборот, как вам удобно) -->
<svg class="top" viewBox="0 0 690 133" > ...
<!-- примерно 7,2 к 1 -->
<svg class="bottom" viewBox="0 0 1170 163" > ...
col-*-offset-2
, если остается 1 элемент, то последнему элементу - col-*-offset-4
. Офсеты добавляют margin слева любой колонке, имитируя нахождение n-го количества колонок слева от него. col-*-6
, в случае 1 - col-*-12