Ломается вёрстка при ссылках на vk

205

27 ноября 2021, 00:20

Вопрос немного странный, я впервые с подобным сталкиваюсь, но, может, Вы знаете в чем у меня проблема. Есть очень простой сайт, построенный на modx revo.

В двух словах: элементы сайта выводятся там "чанками", код в этих чанках "не правился со стороны клиента". Всё, что делал клиент - просто добавлял новости, а они, соответственно, по заранее созданной логике выводились на сайте.

Проблема наблюдалась только на главной странице, где выводятся записи из разделов "Мероприятия" и "Новости".

Как это выглядит:

Как это выглядело "вчера":

Важно:

При добавлении записей указывается лишь картинки в доп поле
Структура вёрстке (классы, col-* и пр.) никак не задаются при добавлении записей.

Как решилась вчера проблема:

Отключал по очереди последние новости и "всё заработало".
Пересохранил новости заново.
Проблема решена.

Но, откуда могла взяться проблема-то? У "проблемных" новостей в описании была стандартная гиперссылка на запись в ВКонтакте, и эта же гиперссылка в инспектора кода поднималась на один уровень с "шаблоном отдельной записи" и тем самым ломала вёрстку.

Извините, но совсем не понимаю, как подобное может быть?

<section class="container-fluid"> 
  <div class="container content"> 
    <div class="row"> 
      <div class="col-sm-12 col-md-9 col-lg-9 border__right"> 
        <div class="content__custom"> 
          <div class="content__news"> 
            <h3>Новости <i class="fas fa-chevron-right"></i></h3> 
            <div class="row"> 
              // Начало шаблона отдельной записи 
              <div class="col-sm-3 col-md-3 col-lg-3"> 
                <div class="content__news-item"> 
                  <div class="content__news-photo"> 
                    <img src="фс.jpg" class="img-fluid" alt="Фестиваль " Её величество Мама " в г.Советск"> 
                  </div> 
                  <div class="content__news-date"> 
                    <span>Дата: 27.11.2019</span> 
                  </div> 
                  <div class="content__news-header"> 
                    <h5><a href="novosti/festival-eyo-velichestvo-mama-v-g.sovetsk.html">Фестиваль "Её величество Мама" в г.Советск</a></h5> 
                  </div> 
                  <!--         <div class="content__news-description"> 
    <p>Сегодня прошел <span style="text-decoration: underline;"><a href="https://vk.com/cspsova?w=wall-174640861_125116"&#8230;</a></span></p> 
</div> --> 
                </div> 
              </div> 
              // конец шаблона отдельной записи 
              <div class="col-sm-3 col-md-3 col-lg-3"> 
                <div class="content__news-item"> 
                  <div class="content__news-photo"> 
                    <img src="images/hyZi5WE4kmA.jpg" class="img-fluid" alt="Экскурсия в пожарную часть"> 
                  </div> 
                  <div class="content__news-date"> 
                    <span>Дата: 27.11.2019</span> 
                  </div> 
                  <div class="content__news-header"> 
                    <h5><a href="novosti/ekskursiya-v-pozharnuyu-chast.html">Экскурсия в пожарную часть</a></h5> 
                  </div> 
                  <!--         <div class="content__news-description"> 
    <p> </p> 
<p>Подопечные семьи ЦСП "С.О.В.А." г.Узловая от всего сердца говорят спасибо руководству <a&#8230;</a></p> 
</div> --> 
                </div> 
              </div> 
              <div class="col-sm-3 col-md-3 col-lg-3"> 
                <div class="content__news-item"> 
                  <div class="content__news-photo"> 
                    <img src="images/сл.jpg" class="img-fluid" alt="Раздача молока Слобода"> 
                  </div> 
                  <div class="content__news-date"> 
                    <span>Дата: 27.11.2019</span> 
                  </div> 
                  <div class="content__news-header"> 
                    <h5><a href="novosti/razdacha-moloka-sloboda.html">Раздача молока Слобода</a></h5> 
                  </div> 
                  <!--         <div class="content__news-description"> 
    <p><span>Сегодня почти для 500 семей состоялась <span style="text-decoration: underline;"><a href="https://vk.com/cspsova?w=wall-174640861_124761"&#8230;</a></span></span></p> 
</div> --> 
                </div> 
              </div> 
              <div class="col-sm-3 col-md-3 col-lg-3"> 
                <div class="content__news-item"> 
                  <div class="content__news-photo"> 
                    <img src="пс.jpg" class="img-fluid" alt="Раздача прыг- скокеров и прилипал"> 
                  </div> 
                  <div class="content__news-date"> 
                    <span>Дата: 25.11.2019</span> 
                  </div> 
                  <div class="content__news-header"> 
                    <h5><a href="novosti/lorem-ipsum-dolor-site-amet-4.html">Раздача прыг- скокеров и прилипал</a></h5> 
                  </div> 
                  <!--         <div class="content__news-description"> 
    <p>Кто в дом принес пакет прыг-скокеров, прилипал и наклейки? Конечно же наши подопечные. Для них это&#8230;</p> 
</div> --> 
                </div> 
              </div> 
              <div class="col-sm-3 col-md-3 col-lg-3"> 
                <div class="content__news-item"> 
                  <div class="content__news-photo"> 
                    <img src="images/OmW0KlFZvVY.jpg" class="img-fluid" alt="Раздача каш и сокосодержащих напитков"> 
                  </div> 
                  <div class="content__news-date"> 
                    <span>Дата: 24.11.2019</span> 
                  </div> 
                  <div class="content__news-header"> 
                    <h5><a href="novosti/lorem-ipsum-dolor-site-amet.html">Раздача каш и сокосодержащих напитков</a></h5> 
                  </div> 
                  <!--         <div class="content__news-description"> 
    <p>Семьи Тульской области от всей души говорят спасибо Благотворительному фонду продовольствия "Русь" за&#8230;</p> 
</div> --> 
                </div> 
              </div> 
              <div class="col-sm-3 col-md-3 col-lg-3"> 
                <div class="content__news-item"> 
                  <div class="content__news-photo"> 
                    <img src="шс.jpg" class="img-fluid" alt="МЕГА-ШОУ СЕЛЕЗНЁВЫХ"> 
                  </div> 
                  <div class="content__news-date"> 
                    <span>Дата: 24.11.2019</span> 
                  </div> 
                  <div class="content__news-header"> 
                    <h5><a href="novosti/lorem-ipsum-dolor-site-amet-5.html">МЕГА-ШОУ СЕЛЕЗНЁВЫХ</a></h5> 
                  </div> 
                  <!--         <div class="content__news-description"> 
    <p><span>Благодарим организаторов МЕГА-ШОУ СЕЛЕЗНЁВЫХ за невероятные впечатления, которые Вы нам подарили!&#8230;</span></p> 
</div> --> 
                </div> 
              </div> 
            </div> 
          </div> 
          <div class="content__hr"></div> 
          <div class="content__news"> 
            <h3>Мероприятия <i class="fas fa-chevron-right"></i></h3> 
            <div class="row"> 
              <div class="col-sm-3 col-md-3 col-lg-3"> 
                <div class="content__news-item"> 
                  <div class="content__news-photo"> 
                    <img src="images/скользко.jpg" class="img-fluid" alt="ФЕСТИВАЛЬ " СКОЛЬЗКО! БЫСТРО! ВЕСЕЛО! ""> 
                  </div> 
                  <div class="content__news-date"> 
                    <span>Дата: 27.11.2019</span> 
                  </div> 
                  <div class="content__news-header"> 
                    <h5><a href="meropriyatiya/lorem-ipsum-dolor-site-amet-8.html">ФЕСТИВАЛЬ "СКОЛЬЗКО! БЫСТРО! ВЕСЕЛО!"</a></h5> 
                  </div> 
                  <!--         <div class="content__news-description"> 
    <p><span>Спорт - жизнь! </span>Зима - это красиво и очень весело! Не грустите дома около телевизора,&#8230;</p> 
</div> --> 
                </div> 
              </div> 
              <div class="col-sm-3 col-md-3 col-lg-3"> 
                <div class="content__news-item"> 
                  <div class="content__news-photo"> 
                    <img src="футбол.jpg" class="img-fluid" alt="ФУТБОЛЬНЫЙ МАРАФОН"> 
                  </div> 
                  <div class="content__news-date"> 
                    <span>Дата: 27.11.2019</span> 
                  </div> 
                  <div class="content__news-header"> 
                    <h5><a href="meropriyatiya/lorem-ipsum-dolor-site-amet-7.html">ФУТБОЛЬНЫЙ МАРАФОН</a></h5> 
                  </div> 
                  <!--         <div class="content__news-description"> 
    <p><span>26 апреля 2019г. состоялся открытый 10-ти часовой <strong>футбольный марафон. </strong></span><br&#8230;</p> 
</div> --> 
                </div> 
              </div> 
              <div class="col-sm-3 col-md-3 col-lg-3"> 
                <div class="content__news-item"> 
                  <div class="content__news-photo"> 
                    <img src="images/IuyibRgMOmY.jpg" class="img-fluid" alt="ФЕСТИВАЛЬ " МУДРАЯ СОВА ""> 
                  </div> 
                  <div class="content__news-date"> 
                    <span>Дата: 01.09.2019</span> 
                  </div> 
                  <div class="content__news-header"> 
                    <h5><a href="meropriyatiya/lorem-ipsum-dolor-site-amet-6.html">ФЕСТИВАЛЬ "МУДРАЯ СОВА"</a></h5> 
                  </div> 
                  <!--         <div class="content__news-description"> 
    <p>1 сентября 2019г. в Центральном парке культуры и отдыха им. П.П. Белоусова с размахом прошел<strong>&#8230;</strong></p> 
</div> --> 
                </div> 
              </div> 
              <div class="col-sm-3 col-md-3 col-lg-3"> 
                <div class="content__news-item"> 
                  <div class="content__news-photo"> 
                    <img src="images/радуга.jpg" class="img-fluid" alt="ФЕСТИВАЛЬ " РАДУГА ДЕТСТВА ""> 
                  </div> 
                  <div class="content__news-date"> 
                    <span>Дата: 08.06.2019</span> 
                  </div> 
                  <div class="content__news-header"> 
                    <h5><a href="meropriyatiya/lorem-ipsum-dolor-site-amet-9.html">ФЕСТИВАЛЬ "РАДУГА ДЕТСТВА"</a></h5> 
                  </div> 
                  <!--         <div class="content__news-description"> 
    <p><span>8 июня 2019г. на Казанской Набережной Тульского кремля прошёл <strong>фестиваль "Радуга детства"</strong>,&#8230;</span></p> 
</div> --> 
                </div> 
              </div> 
            </div> 
          </div> 
          <div class="content__hr"></div> 
          <div class="content__advantages"> 
            <h3>Что мы делаем?</h3> 
            <div class="row"> 
              <div class="col-sm-12 col-md-4 col-lg-4"> 
                <div class="content__advantages-icon"> 
                  <img src="images/icon-2.png" class="img-fluid" alt=""> 
                </div> 
                <div class="content__advantages-info"> 
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid ullam veniam adipisci eaque quibusdam impedit sed nam a, tempora sunt porro. Perspiciatis itaque, repellat unde dignissimos sapiente rem ipsum perferendis.</p> 
                </div> 
              </div> 
              <div class="col-sm-12 col-md-4 col-lg-4"> 
                <div class="content__advantages-icon"> 
                  <img src="images/icon-3.png" class="img-fluid" alt=""> 
                </div> 
                <div class="content__advantages-info"> 
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid ullam veniam adipisci eaque quibusdam impedit sed nam a, tempora sunt porro. Perspiciatis itaque, repellat unde dignissimos sapiente rem ipsum perferendis.</p> 
                </div> 
              </div> 
              <div class="col-sm-12 col-md-4 col-lg-4"> 
                <div class="content__advantages-icon"> 
                  <img src="images/icon-1.png" class="img-fluid" alt=""> 
                </div> 
                <div class="content__advantages-info"> 
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid ullam veniam adipisci eaque quibusdam impedit sed nam a, tempora sunt porro. Perspiciatis itaque, repellat unde dignissimos sapiente rem ipsum perferendis.</p> 
                </div> 
              </div> 
            </div> 
          </div> 
        </div> 
      </div> 
      <div class="col-sm-12 col-md-3 col-lg-3"> 
        <div class="content__photo"> 
          <h3>Фото <i class="fas fa-chevron-right"></i></h3> 
          <div class="d-flex flex-column"> 
            <div class="content__photo-item"> 
              <div class="content__photo-photo"> 
                <img src="/assets/gallery/1/1.jpg" class="img-fluid" alt=""> 
              </div> 
              <div class="content__photo-header"> 
                <h5>123123123</h5> 
              </div> 
            </div> 
            <div class="content__photo-item"> 
              <div class="content__photo-photo"> 
                <img src="/assets/gallery/1/2.jpg" class="img-fluid" alt=""> 
              </div> 
              <div class="content__photo-header"> 
                <h5></h5> 
              </div> 
            </div> 
            <div class="content__photo-item"> 
              <div class="content__photo-photo"> 
                <img src="/assets/gallery/1/3.jpg" class="img-fluid" alt=""> 
              </div> 
              <div class="content__photo-header"> 
                <h5></h5> 
              </div> 
            </div> 
            <div class="content__photo-item"> 
              <div class="content__photo-photo"> 
                <img src="/assets/gallery/1/4.jpg" class="img-fluid" alt=""> 
              </div> 
              <div class="content__photo-header"> 
                <h5></h5> 
              </div> 
            </div> 
            <div class="content__photo-item"> 
              <div class="content__photo-photo"> 
                <img src="/assets/gallery/1/5.jpg" class="img-fluid" alt=""> 
              </div> 
              <div class="content__photo-header"> 
                <h5></h5> 
              </div> 
            </div> 
          </div> 
        </div> 
        <div class="content__hr"></div> 
      </div> 
    </div> 
  </div> 
</section>