background-image

++,  а с тенью как? 😬😁

Это всё сплошной фон. Выгрузи как фон и поставь

Спасибо, буду пробовать)

Iliaa (0) увеличил репутацию Дмитрий (10)

Всем привет! Подскажите пожалуйста, как при адаптивной верстке CSS, перенести объекты с одного места в другое?
То есть, при одном расширении экрана объекты находятся в одном месте, а если при другом, припустим телефон - в другом месте?

есть пример на картинке?

в зависимости от задачи эта проблема может быть решена как одним или несколькими стилями так и созданием дубликата этого элемента специально для мобильной версии, который будет показываться только на мобилках

Медиазапросы

Вот мне нужно объект 'Tech Skills' перенести в центр для отображения его при скролле вниз; Верхний объект с контактами перенести в гамбургер наверное.. И вот так менять местами объекты по мере востребованности.

сейчас покажу
минуту

Для десктопа
<div class="grid-container">
 <div class="block1"></div>
 <div class="block2"></div>
 <div class="block3"></div>
</div>

стили
.grid-container {
 display: grid;
 grid-template-columns: 1fr 1fr;
 grid-template-rows: 1fr 1fr;
 gap: 0px 0px;
grid-template-areas:
   "block1 block3"
   "block2 block3";
}
.block1 { grid-area: block1; }
.block2 { grid-area: block2; }
.block3 { grid-area: block3; }




Для мобилки
стили
это засунь в медиа запрос
.grid-container {
 grid-template-columns: 1fr;
 grid-template-rows: 1fr 1fr 1fr;
 grid-template-areas:
   "block1"
   "block3"
   "block2";
}

вот как то так

задаю ширину как на макете но вылезает что нужно сделать правильно будет ли если уменьшать ширину?

были косяки, исправил
сейчас норм должно быть

в grid-container нужно положить весь документ?

Я сейчас просто разбил документ по блокам, но для него есть основной контейнер с условиями display: flex

Да, там пример верстки есть, и ан картинке выделил блоки