Популярные товары
Все в порядке?
Да, HTML теперь структурно правильный:
main.oval-page
├── section.oval-section
│ └── div.oval-collage-container
│ └── 10 элементов коллажа
└── section.popular-section
├── декоративный разделитель
├── заголовок
└── div.products-grid
└── 6 карточек
Все теги закрыты правильно, карточки находятся внутри .popular-section, а aria-labelledby=»popularProductsTitle» совпадает с id=»popularProductsTitle».
Единственное: ссылки вида:
href=»/catalog/mezuzah»
должны соответствовать реальным адресам страниц магазина. На отображение карточек это не влияет.
Вставленный текст.txt
Документ
CSS
Да, давай проверим именно CSS.
По HTML у меня замечаний уже нет. Значит искать нужно в стилях.
Пришли полностью текущий ldn1.css, который сейчас лежит на сервере.
Не тот, который был когда-то, а именно тот, который сейчас загружен в:
/wp-content/themes/astra-child/assets/css/ldn1.css
Я проверю его построчно.
Сейчас менять ничего не будем. Нужно понять, почему:
овал отображается;
а блок .popular-section и .products-grid не появляется.
Если HTML правильный (а он правильный), то причина почти наверняка в одном из следующих пунктов:
какой-то незакрытый CSS-блок;
ошибка синтаксиса (из-за неё браузер перестал читать файл с определённого места);
конфликт стилей с темой Astra;
глобальный стиль, который скрывает содержимое.
Разберём это по факту, а не предположениями. Пришли полный текущий ldn1.css, и я проверю его целиком.
ldn11.txt
Документ
Нашёл точную ошибку.
Это не ldn1.css, а файл стилей слайдера. И в нём не закрыт блок:
.slide-message-big {
После строки:
font-weight: 400;
пропущена закрывающая фигурная скобка }. Из-за этого браузер считает все последующие правила частью .slide-message-big, поэтому CSS ниже работает неправильно.
Замените этот участок:
.slide-message-big {
font-family: Georgia, serif;
font-size: 58px;
line-height: 1.05;
font-weight: 400;
/* Убираем стандартные отступы Astra на страницах со слайдерами */
на:
.slide-message-big {
font-family: Georgia, serif;
font-size: 58px;
line-height: 1.05;
font-weight: 400;
}
/* Убираем стандартные отступы Astra на страницах со слайдерами */
Также у вас позже стоит лишняя закрывающая скобка перед:
@media (max-width: 420px)
Сейчас фрагмент выглядит так:
body.page .entry-content > .hero-page {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
@media (max-width: 420px) {
Нужно удалить вторую скобку:
body.page .entry-content > .hero-page {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
@media (max-width: 420px) {
И ещё исправьте повреждённый символ:
.hero-line::after {
content: «Рюд»;
}
на:
.hero-line::after {
content: «✦»;
}
Главное: присланный код относится к slider.css. В нём вообще нет классов:
.oval-page
.oval-collage-container
.popular-section
.products-grid
.product-card
Значит, это не файл ldn1.css, который отвечает за овал и карточки.
ок. поправил. смотри сам файл стилей овала/* =========================================================
ldn1.css
Страница овального коллажа и популярных товаров
========================================================= */
/* =========================================================
БАЗОВАЯ СТРАНИЦА
========================================================= */
.oval-page,
.oval-page * {
box-sizing: border-box;
}
.oval-page {
width: 100%;
min-height: 100vh;
margin: 0;
padding: 24px 20px 70px;
overflow-x: hidden;
background: #faf8f5;
color: #2b2b2b;
font-family: Arial, Helvetica, sans-serif;
}
.oval-page a {
color: inherit;
text-decoration: none;
}
.oval-page img {
display: block;
max-width: 100%;
}
/* =========================================================
СЕКЦИЯ ОВАЛА
========================================================= */
.oval-section {
width: 100%;
margin: 0;
padding: 0;
}
.oval-collage-container {
position: relative;
width: min(1100px, 100%);
aspect-ratio: 16 / 9;
margin: 20px auto 65px;
background: #faf8f5;
}
/* =========================================================
ОБЩИЕ СТИЛИ ПРЕДМЕТОВ
========================================================= */
.collage-item {
position: absolute;
z-index: 2;
display: block;
cursor: pointer;
filter:
drop-shadow(0 6px 12px rgba(43, 31, 20, 0.12))
drop-shadow(0 2px 4px rgba(43, 31, 20, 0.08));
transition:
transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
filter 0.3s ease;
}
.collage-item:hover {
z-index: 10;
transform: scale(1.06) translateY(-6px);
filter:
drop-shadow(0 14px 22px rgba(43, 31, 20, 0.18))
drop-shadow(0 4px 8px rgba(43, 31, 20, 0.12));
}
.collage-item:focus-visible {
outline: 2px solid #b59052;
outline-offset: 5px;
border-radius: 8px;
}
.collage-item img {
width: 100%;
height: auto;
object-fit: contain;
background: transparent;
}
/* =========================================================
РАСПОЛОЖЕНИЕ ПО ОВАЛУ
========================================================= */
/* 1. Мезуза — верхний центр */
.item-mz {
top: 2%;
left: 50%;
width: 7%;
transform: translateX(-50%);
}
.item-mz:hover {
transform: translateX(-50%) translateY(-6px) scale(1.06);
}
/* 2. Авдала — верхняя левая дуга */
.item-avdala {
top: 7%;
left: 26%;
width: 11%;
}
/* 3. Винный фонтан — верхняя правая дуга */
.item-dis {
top: 7%;
right: 26%;
width: 13%;
}
/* 4. Талит и тфилин — левый бок */
.item-br2 {
top: 28%;
left: 4%;
width: 18%;
}
/* 5. Шофар — правый бок */
.item-dsp {
top: 36%;
right: 5%;
width: 13%;
}
/* 6. Подсвечники — нижняя правая дуга */
.item-sh {
right: 12%;
bottom: 12%;
width: 9%;
}
/* 7. Натла — нижняя левая боковая часть */
.item-natla {
top: 58%;
left: 8%;
width: 12%;
}
/* 8. Кидушный бокал — нижняя левая дуга */
.item-cup {
bottom: 10%;
left: 24%;
width: 11%;
}
/* 9. Кеара — нижний центр */
.item-hesah {
bottom: 2%;
left: 50%;
width: 17%;
transform: translateX(-50%);
}
.item-hesah:hover {
transform: translateX(-50%) translateY(-6px) scale(1.06);
}
/* 10. Центральный элемент */
.item-center {
top: 50%;
left: 50%;
z-index: 3;
width: 15%;
transform: translate(-50%, -50%);
}
.item-center:hover {
z-index: 10;
transform: translate(-50%, -50%) scale(1.06);
}
/* =========================================================
ПОПУЛЯРНЫЕ ТОВАРЫ
========================================================= */
.popular-section {
width: min(1180px, 100%);
margin: 0 auto;
padding: 35px 20px 60px;
text-align: center;
}
/* =========================================================
ДЕКОРАТИВНЫЙ РАЗДЕЛИТЕЛЬ
========================================================= */
.decorative-separator {
display: flex;
width: 100%;
margin: 0 0 18px;
align-items: center;
justify-content: center;
}
.separator-ornament {
position: relative;
display: block;
width: 90px;
height: 1px;
background: #ba9457;
}
.separator-ornament::before {
content: «✦»;
position: absolute;
top: 50%;
left: 50%;
padding: 0 7px;
transform: translate(-50%, -50%);
background: #faf8f5;
color: #ba9457;
font-size: 11px;
line-height: 1;
}
/* =========================================================
ЗАГОЛОВОК
========================================================= */
.popular-title {
display: inline-flex;
margin: 0 0 35px;
align-items: center;
justify-content: center;
gap: 15px;
color: #1a1a1a;
font-family: Georgia, «Times New Roman», serif;
font-size: 28px;
font-weight: 500;
line-height: 1.2;
text-align: center;
}
.popular-title::before,
.popular-title::after {
content: «❧»;
color: #ba9457;
font-size: 16px;
line-height: 1;
}
/* =========================================================
СЕТКА КАРТОЧЕК
========================================================= */
.products-grid {
display: grid;
width: 100%;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 16px;
}
/* =========================================================
КАРТОЧКА ТОВАРА
========================================================= */
.product-card {
display: flex;
min-width: 0;
min-height: 300px;
padding: 16px;
flex-direction: column;
align-items: center;
justify-content: space-between;
overflow: hidden;
border: 1px solid rgba(186, 148, 87, 0.16);
border-radius: 10px;
background: #ffffff;
box-shadow: 0 4px 12px rgba(43, 31, 20, 0.04);
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.product-card:hover {
transform: translateY(-4px);
border-color: rgba(186, 148, 87, 0.34);
box-shadow: 0 8px 20px rgba(43, 31, 20, 0.09);
}
/* =========================================================
ИЗОБРАЖЕНИЕ В КАРТОЧКЕ
========================================================= */
.product-img-box {
display: flex;
width: 100%;
height: 160px;
margin: 0 0 12px;
align-items: center;
justify-content: center;
}
.product-img-box img {
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
object-fit: contain;
}
/* =========================================================
НАЗВАНИЕ ТОВАРА
========================================================= */
.product-card-title {
display: flex;
min-height: 40px;
margin: 0 0 15px;
align-items: center;
justify-content: center;
color: #2b2b2b;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: 500;
line-height: 1.3;
text-align: center;
}
/* =========================================================
КНОПКА
========================================================= */
.product-card-btn {
display: inline-flex;
width: 110px;
min-height: 34px;
padding: 7px 10px;
align-items: center;
justify-content: center;
border-radius: 6px;
background: #b59052;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1;
text-align: center;
text-decoration: none;
transition:
background-color 0.2s ease,
color 0.2s ease,
transform 0.1s ease;
}
.product-card-btn:hover {
background: #9c7a42;
color: #ffffff;
}
.product-card-btn:active {
transform: scale(0.97);
}
.product-card-btn:focus-visible {
outline: 2px solid #8a672f;
outline-offset: 3px;
}
/* =========================================================
ПЛАНШЕТ
========================================================= */
@media (max-width: 1024px) {
.oval-page {
padding-right: 16px;
padding-left: 16px;
}
.products-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* =========================================================
МОБИЛЬНЫЙ КОЛЛАЖ
========================================================= */
@media (max-width: 768px) {
.oval-collage-container {
display: grid;
width: 100%;
height: auto;
aspect-ratio: auto;
margin-bottom: 45px;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.collage-item,
.item-mz,
.item-avdala,
.item-dis,
.item-br2,
.item-dsp,
.item-sh,
.item-natla,
.item-cup,
.item-hesah,
.item-center {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
width: 100%;
transform: none;
}
.collage-item:hover,
.item-mz:hover,
.item-hesah:hover,
.item-center:hover {
transform: translateY(-4px) scale(1.04);
}
.collage-item img {
width: 100%;
height: 150px;
object-fit: contain;
}
.popular-section {
padding-right: 0;
padding-left: 0;
}
}
/* =========================================================
ТЕЛЕФОН
========================================================= */
@media (max-width: 600px) {
.oval-page {
padding: 18px 12px 50px;
}
.oval-collage-container {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 12px;
}
.collage-item img {
height: 135px;
}
.products-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.popular-title {
font-size: 22px;
gap: 10px;
}
.product-card {
min-height: 280px;
padding: 12px;
}
.product-img-box {
height: 140px;
}
.product-card-title {
font-size: 14px;
}
}
/* =========================================================
МАЛЕНЬКИЙ ТЕЛЕФОН
========================================================= */
@media (max-width: 420px) {
.products-grid {
grid-template-columns: 1fr;
}
.product-card {
min-height: 290px;
}
.product-img-box {
height: 175px;
}
}
Сам ldn1.css написан правильно:
все фигурные скобки закрыты;
.popular-section, .products-grid и .product-card не скрыты;
карточки должны находиться сразу под овалом;
в этом файле нет display: none, visibility: hidden или фиксированной высоты, обрезающей карточки.
Проблема находится не в ldn1.css, а в том, что gateway.css подключается глобально. В нём у нас было:
body {
overflow: hidden;
}
Из-за этого страница с овалом не прокручивается до карточек.
В gateway.css удалите глобальный блок:
body {
overflow: hidden;
}
И замените его на:
body:has(.gateway) {
overflow: hidden;
}
Ещё правильнее — подключать gateway.css только на странице парохета. В functions.php блок подключения парохета должен выглядеть так:
$gateway_css_path = $theme_directory . ‘/assets/css/gateway.css’;
if (is_front_page() && file_exists($gateway_css_path)) {
wp_enqueue_style(
‘menora-gateway-style’,
$theme_uri . ‘/assets/css/gateway.css’,
array(‘astra-child-style’),
(string) filemtime($gateway_css_path)
);
}
$gateway_js_path = $theme_directory . ‘/assets/js/gateway.js’;
if (is_front_page() && file_exists($gateway_js_path)) {
wp_enqueue_script(
‘menora-gateway-script’,
$theme_uri . ‘/assets/js/gateway.js’,
array(),
(string) filemtime($gateway_js_path),
true
);
}
А ldn1.css можно оставить в том виде, который вы прислали. В нём синтаксической ошибки нет.
Подключилось. Поправил размер шрифта и теперь на экране белый лист. Контент страницы сохранен. Все остальные страницы сайта работают.
Скорее всего, при изменении font-size рядом появилась синтаксическая ошибка: пропущена ; или }, либо случайно удалена часть селектора.
Сначала верните последнюю правку. Например, строка должна выглядеть так:
.popular-title {
display: inline-flex;
margin: 0 0 35px;
align-items: center;
justify-content: center;
gap: 15px;
color: #1a1a1a;
font-family: Georgia, «Times New Roman», serif;
font-size: 28px;
font-weight: 500;
line-height: 1.2;
text-align: center;
}
После сохранения:
Очистите кэш WordPress.
Обновите страницу через Ctrl + F5.
Проверьте, не появилась ли лишняя скобка перед или после изменённой строки.
Пришлите участок CSS примерно по 10 строк до и после изменённого font-size — там почти наверняка и находится ошибка.