Как сделать border динамическим по ширине на десктопе и по высоте на смартфоне?
Дизайнер дал мне макет, в нём есть такой блок:
Вёрстка естественно будет адаптивной и в последствии будет сажаться на Wordpress.
Я не понимаю как сделать border динамическим.
Я просто задал ему фиксированную ширину, но если заказчик поменяет текст, то вёрстка поедет.
Не хотелось бы блокам `workplan__step` задавать статическую ширину, чтобы контент в них не расползался.
У меня пока получается вот такая кривая вёрстка: https://codepen.io/vlad-tarasoffka/pen/NWJXaeL
И да. Нужно сделать с пристрелом на смартфон, где все эти блоки перестроятся по флексу вертикально и border тоже трансформируется вертикально типа:
o Дефектовка
|
|
o Ремонт
|
|
o Испытание на стенде
|
|
o Передача заказа
Никогда такие блоки ещё не встречались. Подскажите как правильно решается такая задача?
Дополнительно:
snippet
- Спасибо, если бы ещё пунктиры чётко примыкали друг к другу, было бы вообще зашибись.
Я попробовал поиграться с background-position. Ничего не получилось.
Не знаю, можно ли как-то этого добиться. - Влад, Поправил, теперь не примыкают
- Виталий Першин, точняк! только свойство с такими значениями нужно в медиа-запрос помещать, а на мобайл-ферст нужно background-position: bottom 0;
Ещё вопрос по svg. Он какой-то там весь заэкранированный для css, не могу понять как цвет поменять.. и что означают в нём проценты?
- Влад,
width='4' height='10' style='fill:orange;' rx='3' ry='3'
ширина, высота, цвет, закруглениеПроценты это спец символы вместо <svg></svg>
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать border динамическим по ширине на десктопе и по высоте на смартфоне, можно использовать медиа-запросы в CSS. Медиа-запросы позволяют применять разные стили к элементам в зависимости от различных параметров, таких как ширина экрана.
Вот как можно сделать это для элемента с классом "example":
```html
.example {
border: 2px solid black; /* Общие стили border */
}
@media screen and (min-width: 768px) {
.example {
border-width: 2px 0; /* Для десктопа - ширина 2px, высота 0 */
}
}
@media screen and (max-width: 767px) {
.example {
border-width: 0 2px; /* Для смартфона - ширина 0, высота 2px */
}
}
```
В данном примере мы задаем общие стили для border у элемента с классом "example". Затем, с помощью медиа-запросов, мы изменяем ширину и высоту border в зависимости от ширины экрана. Для десктопа (ширина экрана 768px и больше) задаем ширину 2px и высоту 0, а для смартфона (ширина экрана меньше 768px) - ширину 0 и высоту 2px.
Таким образом, border будет изменяться динамически в зависимости от размера экрана, что позволит достичь нужного эффекта на десктопе и на смартфоне.