У вас скорее всего стили сверстаны криво, есть зависимость от порядка их подключения… из любопытства посмотрите последовательность загрузки файлов стилей. И ресета тоже
Вот такие стили
.collage-wrapper {
position: relative;
width: 1333px;
height: 2000px;
background: url('https://www.ytropa.ru/wp-content/uploads/2025/06/brown-scrapbook-.png') no-repeat center center;
background-size: cover;
margin: 0 auto;
overflow: visible;
}
.image-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.image-layer h1
{
text-align: center;
text-transform: uppercase;
font-size: 72px;
margin-top:20px
}
.polaroid {
position: absolute;
width: 265px;
height: 265px;
background: white;
padding: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
z-index: 6;
object-fit: cover;
transform-origin: center center;
}
.img1 {
top: 579px;
left: 211px;
transform: rotate(+17deg);
}
.img2 {
top: 617px;
left: 541px;
transform: rotate(7deg);
}
.img3 {
top: 593px;
left: 867px;
transform: rotate(-5deg);
}
/* Второй ряд */
.img4 {
top: 1065px;
left: 221px;
transform: rotate(10deg);
}
.img5 {
top: 1050px;
left: 554px;
transform: rotate(-2deg);
}
.img6 {
top: 991px;
left: 889px;
transform: rotate(-11deg);
}
/* Третий ряд */
.img7 {
top: 1465px;
left: 183px;
transform: rotate(22deg);
}
.img8 {
top: 1500px;
left: 529px;
transform: rotate(11deg);
}
.img9 {
top: 1499px;
left: 866px;
transform: rotate(-6deg);
}
Без ссылки на проблемную страницу показ стилей здесь не имеет смысла. Фансибокс например может убивать ваши стили, и ресета тут не поможет
у вас, кроме указанных вами стилей, имеется еще один, который весь коллаж убивает
.collage-wrapper img {
- all: unset !important;
- positionThe position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.ПодробнееНе показывать: absolute !important;
- width: 265px !important;
- height: 265px !important;
- background: #fff !important;
- padding: 10px !important;
- box-shadow: 0 5px 15px rgba(0, 0, 0, .2) !important;
- z-index: 6 !important;
- object-fit: cover !important;
- transform-origin: center center !important;
- max-width: none !important;
}
На нумерацию не обращайте внимания, скопировалось так…. откуда эта байда берется — неизвестно, потому что вы еще и autoptimize включили
Вообще я вам скажу, что использовать !important в верстке тупо нельзя, вы примерно вот так себе проблемы и находите. Научитесь как обходиться без.
efess , использование !important в столь больших количествах это был жест отчаянья. Аutoptimize отключил. .collage-wrapper img — но ведь в списке стилей его нет?
как же нет… https://www.ytropa.ru/wp-content/themes/astra-child/style.css
60 строка… первый же all: unset !important; /* убираем влияние Astra и WP */ убивает ваш коллаж
пользуйтесь отладчиком хрома, в нем все видно, и кто где находится, и кто на что влияет… можно оперативно стиль на пробу поправить
efess, когда я говорил » что этого стиля нет» я имел в виду что нет в изначальных стилях, самого коллажа.
я не понимаю, что вы имеете в виду. что такое изначальные стили и почему данный стиль не должен влиять на коллаж по причине его непричисления к изначальным — для меня загадка
Что имелось ввиду — Изначальные это те стили которые были прописаны при создании коллажа. Поставил на codepen там было все нормально. Перенес на сайт и там та картинка которую вы видели. А .collage-wrapper img — это была попытка сбросить стили.
А, вончо… Кодепеновские стили в общем случае могут не учесть стили сайта, надо по месту допиливать. А ваша попытка сбросить стили их сбросила, да. Убив коллаж.
Ок. а что бы изменилось если бы этот стили этого коллажа были написаны в каком-нибудь редакторе или просто прямо сайте, как пользовательские стили. Кстати, коллаж убит только в Astre. в других темах он вполне рабочий.
Неудивительно, ччто только в астре убит. Стиль ведь прописан в файле дочерей темы. Он там самозародился?
