Михаил Захаров:
чет у меня не работает media handheld and (max-width: 500px)
на моем iphone и на stackoverflow встречал инфу что ни android, ни ios не относят свои устройства к типу handheld, очень похоже что это свойство устарело(?)
Есть более точная информация или живые примеры?
вот тут и на русскоязычном "стаке" обсуждали и ссылка на хабр статью https://ru.stackoverflow.com/questions/428020/medi...
Александр Вальгер: ничего не глупо, видно же что он центрирует padding'ами, а они, естественно, раздувают элемент по разному в данном случае.
На сегодняшний день я бы не задумываясь задал для контейнера иконки, например:
{
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
} https://jsfiddle.net/o5o6m1dh/
Странно что только jsfiddle обошла стороной страшная болезнь обрусения. Можно его по дружески называть жиесьфидле. Зачем переключать раскладку в следующий раз, экономь время.
Никита Полевой: Смотри, серый блок имеет 30% длины, красный имеет 70% длины. Оба они занимают 100vw. Но контент в них должен быть ограничен контейнером, предположим, 500px. Было бы легче легкого сделать один блок с градиентом двух цветов и спозиционировать его абсолютом если бы внутри не надо было делать колонки как на рисунке. Как подогнать что бы колонка заканчивалась на сером блоке и начиналась новая на красном я не смог понять вчера.
BB 8: это настоящее колдунство (=
Я ссылку по факту в разметке поместил перед списком, что дает мне возможность манипулировать с ним с помощью +
А располагается она внизу визуально с помощью свойства order которым можно тасовать элементы в flex контейнере что карты в колоде.
senefu: у меня и mac и pc есть с десктопами еще мне повезло. но присматриваюсь к browserstack потому что android browser и Samsung browser и safari mobile это конкретные три проблемы)
senefu: везде окей (опера, яндекс, хром, фф, сафари, даже блиск.)
при разрешении 1280 блоки прилипают друг к другу но не переносятся. подозреваю, что им надо какие-то марджины раздать)
senefu: ну задай что-то типа top: 50% и left: 50% и transform: translate(-50%, -50%). Вот кнопка по умолчанию по центру блока.
Отсюда же можно и плясать с начальными и конечными координатами при :hover
senefu: если карточкам задать flex: 1 они выстроятся в ряд и в сафари.
Кнопкам присвоин позишн абсолют, а координаты по отношению к сторонам не заданы.
Я отказываюсь понимать почему кнопки работают в других браузерах)
Видимо они по умолчанию элементу присваивают координаты которые подошли, но придется делать как положено в любом случае. Эти свойства не такие уж и кроссбраузерные, я бы сказал совсем нет.
чет у меня не работает
media handheld and (max-width: 500px)
на моем iphone и на stackoverflow встречал инфу что ни android, ни ios не относят свои устройства к типу handheld, очень похоже что это свойство устарело(?)
Есть более точная информация или живые примеры?
вот тут и на русскоязычном "стаке" обсуждали и ссылка на хабр статью
https://ru.stackoverflow.com/questions/428020/medi...