При использования css в описании ломаются стили

Всем привет, я первый раз пользуюсь опенкартом. Хочу сделать товарам красивые описания. Почему при использовании любых классов в описании

<div class="ocdesc-section">
<h3>Почему это стоит взять</h3>

вот к примеру. То верстка ломается.
Версия опенкарта
Version 2.3.0.2 (trs-2.3.0.0)

 

Здравствуйте

Вы бы пример прислали

 

Здравствуйте, пример чего? Если описания то вот


<!-- Начало описания товара. Не трогайте этот тег. -->
<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: #333;">

<!-- Блок 1: Главный заголовок с фоном -->
<div style="background-color: #f8fafc; padding: 50px 20px; text-align: center;">
<h2 style="font-size: 36px; color: #1e3a8a; margin-top: 0; margin-bottom: 10px;">Бельгийский ковер премиум-класса</h2>
<p style="font-size: 18px; color: #666; margin-top: 0; max-width: 700px; margin-left: auto; margin-right: auto;">
Изысканный дизайн с геометрическим орнаментом для вашего интерьера
</p>
</div>

<!-- Блок 2: Изображение + Описание (2 колонки) -->
<div style="padding: 50px 20px;">
<div style="display: flex; flex-wrap: wrap; align-items: center; margin: -15px;">
<!-- Левая колонка: Изображение -->
<div style="flex: 1 1 300px; padding: 15px;">
<!-- ЗАМЕНИТЕ ССЫЛКУ НА ВАШЕ ИЗОБРАЖЕНИЕ -->
<img src="https://via.placeholder.com/600x600.png/1e3a8a/ffffff?text=Фото+Ковра" alt="Бельгийский ковер" style="max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
</div>
<!-- Правая колонка: Текст -->
<div style="flex: 1 1 300px; padding: 15px;">
<h3 style="font-size: 28px; color: #1e3a8a; margin-top: 0;">О ковре</h3>
<p>Этот <strong>бельгийский ковер</strong> создан с использованием лучших европейских технологий производства. Уникальное сочетание синего, бежевого и черного цветов создает элегантную композицию, которая идеально впишется в гостиную, спальню или кабинет.</p>
<p>Изготовленный на современном оборудовании из высококачественного полипропилена, он сочетает в себе эстетику и практичность, обеспечивая долговечность и легкость в уходе.</p>
<!-- Кнопка -->
<div style="margin-top: 25px;">
<span style="background-color: #1e3a8a; color: #ffffff; padding: 12px 24px; font-size: 16px; font-weight: bold; border-radius: 6px; display: inline-block;">
MADE IN BELGIUM
</span>
</div>
</div>
</div>
</div>

<!-- Блок 3: Преимущества (3 колонки) -->
<div style="background-color: #eff6ff; padding: 50px 20px; text-align: center;">
<h3 style="font-size: 28px; color: #1e3a8a; margin-top: 0; margin-bottom: 40px;">Преимущества</h3>
<div style="display: flex; flex-wrap: wrap; margin: -15px;">
<!-- Преимущество 1 -->
<div style="flex: 1 1 280px; padding: 15px;">
<div style="background-color: #dbeafe; width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;">
<i class="fa fa-certificate" style="font-size: 36px; color: #1e3a8a;"></i>
</div>
<h4 style="font-size: 20px; color: #1e3a8a; margin-bottom: 10px;">Бельгийское качество</h4>
<p>Производство на высокотехнологичном оборудовании по европейским стандартам.</p>
</div>
<!-- Преимущество 2 -->
<div style="flex: 1 1 280px; padding: 15px;">
<div style="background-color: #dbeafe; width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;">
<i class="fa fa-leaf" style="font-size: 36px; color: #1e3a8a;"></i>
</div>
<h4 style="font-size: 20px; color: #1e3a8a; margin-bottom: 10px;">Гипоаллергенный</h4>
<p>Безопасный материал, подходит для аллергиков и семей с детьми.</p>
</div>
<!-- Преимущество 3 -->
<div style="flex: 1 1 280px; padding: 15px;">
<div style="background-color: #dbeafe; width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;">
<i class="fa fa-tint" style="font-size: 36px; color: #1e3a8a;"></i>
</div>
<h4 style="font-size: 20px; color: #1e3a8a; margin-bottom: 10px;">Легкий уход</h4>
<p>Не впитывает влагу, легко чистится пылесосом или влажной салфеткой.</p>
</div>
</div>
</div>

<!-- Блок 4: Палитра + Спецификации (2 колонки) -->
<div style="padding: 50px 20px;">
<div style="display: flex; flex-wrap: wrap; margin: -15px;">
<!-- Левая колонка: Палитра -->
<div style="flex: 1 1 300px; padding: 15px;">
<h3 style="font-size: 28px; color: #1e3a8a; margin-top: 0;">Цветовая палитра</h3>
<div style="display: flex; gap: 20px; margin: 25px 0; flex-wrap: wrap;">
<div style="text-align: center;">
<div style="width: 80px; height: 80px; background: #f5f5dc; border: 1px solid #ddd; border-radius: 8px;"></div>
<span style="display: block; margin-top: 10px; font-weight: 600;">Бежевый</span>
</div>
<div style="text-align: center;">
<div style="width: 80px; height: 80px; background: #1e3a8a; border: 1px solid #ddd; border-radius: 8px;"></div>
<span style="display: block; margin-top: 10px; font-weight: 600;">Синий</span>
</div>
<div style="text-align: center;">
<div style="width: 80px; height: 80px; background: #000000; border: 1px solid #ddd; border-radius: 8px;"></div>
<span style="display: block; margin-top: 10px; font-weight: 600;">Черный</span>
</div>
</div>
<p>Контрастное сочетание цветов создает динамичную композицию, добавляя пространству глубины и характера. Эти оттенки легко комбинируются с различными стилями интерьера.</p>
</div>
<!-- Правая колонка: Спецификации -->
<div style="flex: 1 1 300px; padding: 15px;">
<h3 style="font-size: 28px; color: #1e3a8a; margin-top: 0;">Характеристики</h3>
<p style="font-size: 16px; line-height: 2;">
<strong style="color: #1e3a8a;">Размер:</strong> 160 × 230 см<br>
<strong style="color: #1e3a8a;">Материал:</strong> 100% Полипропилен<br>
<strong style="color: #1e3a8a;">Форма:</strong> Прямоугольная<br>
<strong style="color: #1e3a8a;">Производство:</strong> Машинная работа<br>
<strong style="color: #1e3a8a;">Страна:</strong> Бельгия<br>
<strong style="color: #1e3a8a;">Высота ворса:</strong> Средний
</p>
</div>
</div>
</div>

<!-- Блок 5: Финальный призыв -->
<div style="background-color: #1e3a8a; padding: 50px 20px; text-align: center;">
<h3 style="font-size: 32px; color: #ffffff; margin-top: 0; margin-bottom: 15px;">Бельгийское качество для вашего дома</h3>
<p style="font-size: 18px; color: #ffffff; max-width: 700px; margin: 0 auto;">Этот ковер станет идеальным дополнением вашего интерьера, добавляя комфорта, стиля и европейского качества в ваше пространство.</p>
</div>

</div>
<!-- Конец описания товара -->

 

В описании используем только html. Стили выносим отдельно. Ломается по нескольким причинам, или не закрытый тег или описание не помещается так как ограничение в базе.

 

Использование классов и стилей не ломает вёрстку.

Спойлер: Ваш пример

Но в вашем примере выше много лишнего и надо бы оптимизировать.

Вёрстку может ломать редактор удаляя некоторые теги.
Во-первых, код нужно вставлять в режиме кода и обязательно переключить на визуальный режим перед сохранением.
Во-вторых, один из редакторов (не помню какой именно) удаляет почти все теги. Сейчас нет демки ОС 3 чтобы посмотреть какой редактор стоит в Русской сборке.

 

у меня редактор Summernote 0.8.1
но почему то как я начинаю использовать div с классами сразу ломается. Но! Я пробовал загружать такое описание через экспорт и импорт, у меня стили все равно ломаются. Хотя по логике к редактору никакого отношения это иметь не может

 

даже если описание маленькое не дает. Именно когда начинаю div использовать все ломается

 

Ну это же можно проверить. Хоть сайт покажите, посмотрят люди, где ломается.
Самостоятельно добавили теги, глянули исходник что пропало. Ведь может это специально у Вас так сделано, например обрезать html описание по кол-ву символов, как итог лом верстки. Или постобработка описания.. чтобы что то сделать (удалить кавычки), как итог тоже лом верстки.

 

сайт 1001 kover com ua
В категории ковры 1 товар

 

Не вижу криминала

 

та да, проблема в том что опенкарт когда я сохраняю описание иногда само описание ломает.

 

Скорее всего да. Опенкарт обрезает длинное описание. Я в бд в таблице oc_product_description в значении description поменял с text на medium text, но не помогло. Где можно еще исправить?

 

Что то не договариваете.. Вот на указанной странице видно что описание обрезано, потому и слетает.
Вставьте для примера что по проще и можно говорить о том, ломает или не

HTML:

<div id="rrr"><span class="hh">Привет</span></div>

 

Поставил, не ломает, значит и вправду проблема в том что обрезает.

 

Не помогло в базе, обрезается или уже в базе не обрезается, а на витрине проблема? В общем увеличивайте размер поля в бд. Но вообще это не правильно..

 

Уже в базе обрезанное описание лежит
Вот пример


&lt;!-- Початок опису товару. Версія на таблицях, стійка до редакторів. --&gt;
&lt;div style=&quot;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: #333;&quot;&gt;

&lt;!-- Блок 1: Головний заголовок --&gt;
&lt;div style=&quot;background-color: #f8fafc; padding: 50px 20px; text-align: center;&quot;&gt;
&lt;h2 style=&quot;font-size: 36px; color: #6d4c41; margin-top: 0; margin-bottom: 10px; font-weight: 600;&quot;&gt;Розкішний турецький килим Shaggy з високим ворсом&lt;/h2&gt;
&lt;p style=&quot;font-size: 18px; color: #666; margin-top: 0; max-width: 700px; margin-left: auto; margin-right: auto;&quot;&gt;
Пориньте в атмосферу тепла та затишку з покриттям для підлоги преміум-класу
&lt;/p&gt;
&lt;/div&gt;

&lt;!-- Блок 2: Зображення + Опис (2 колонки) --&gt;
&lt;table width=&quot;100%&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; style=&quot;width: 100%; border-collapse: collapse;&quot;&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td style=&quot;padding: 50px 20px;&quot;&gt;
&lt;table width=&quot;100%&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; style=&quot;width: 100%; border-collapse: collapse;&quot;&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;!-- Ліва колонка: Зображення --&gt;
&lt;td width=&quot;50%&quot; style=&quot;width: 50%; padding: 15px; vertical-align: top;&quot;&gt;
&lt;!-- ЗАМІНІТЬ ПОСИЛАННЯ НА ВАШЕ ЗОБРАЖЕННЯ --&gt;
&lt;img src=&quot;https://via.placeholder.com/600x600.png/8d6e63/ffffff?text=Фото+Вашого+Килима&quot; alt=&quot;Турецький килим Shaggy в коричнево-бежевих тонах&quot; style=&quot;max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.1);&quot;&gt;
&lt;/td&gt;
&lt;!-- Права колонка: Текст --&gt;
&lt;td width=&quot;50%&quot; style=&quot;width: 50%; padding: 15px; vertical-align: top;&quot;&gt;
&lt;h3 style=&quot;font-size: 28px; color: #6d4c41; margin-top: 0; font-weight: 600;&quot;&gt;Про килим&lt;/h3&gt;
&lt;p&gt;Цей &lt;strong&gt;турецький килим Shaggy&lt;/strong&gt; створений, щоб стати центральним елементом вашого інтер'єру та наповнити дім теплом. Його неймовірно &lt;strong&gt;високий ворс (50 мм)&lt;/strong&gt; дарує незабутні відчуття м'якості та комфорту під ногами, перетворюючи кожен крок на справжнє задоволення.&lt;/p&gt;
&lt;p&gt;Виготовлений на сучасному обладнанні зі 100% поліестеру, він поєднує в собі естетику та практичність, забезпечуючи довговічність та легкість у догляді.&lt;/p&gt;
&lt;div style=&quot;margin-top: 25px;&quot;&gt;
&lt;span style=&quot;background-color: #6d4c41; color: #ffffff; padding: 12px 24px; font-size: 16px; font-weight: bold; border-radius: 6px; display: inline-block;&quot;&gt;


Проблема значит в редакторе Summernote?

 

Я попробовал через бд вставить описание все заработало, буду искать где редактор это ломает. Всем спасибо большое.
P.s А хотя нет. Хоть редактор и вырезал. Все равно что то обрезает

 

Подскажите пожалуйста в каких файлах можно поискать? Сервер не блочит ничего, но все равно обрезается. Куда копать?

 

Вроде все файлы которые могут отвечать за это перепроверил. Думал может Mod_security Режет, но хостинг говорит что все ок

 

Но и при таком количестве лишнего, у меня нормально сохранилось. И без увеличения размера поля в БД.