Теги абзаца не работают должным образом - PullRequest
0 голосов
/ 21 апреля 2020

Заранее спасибо за любую помощь здесь.

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

Внутри библиотеки есть пункты меню, которые имеют название, описание и цену. В некоторых случаях цена товара отсутствует, и когда это поле в CMS пустое, линии по-разному оформляются.

Вот как я хочу, чтобы это выглядело: Живой сайт: https://www.crownshy.nyc/menus/#cocktails

страница с коктейлями non-al c без цен

Вот как он заполняется в песочнице: https://crownshy-sandbox.getbento.com/menus/#cocktails

Страница с песочницами и коктейлями non-al c без цен

Здесь нет ничего особенного в коде, поэтому я немного растерялся. Мне просто нужно сделать перерыв и вернуться с свободным глазом, но я надеюсь, что вы все сможете ускорить это. Я рад опубликовать CSS, но думаю, потому что это несколько классов, которые было бы проще посмотреть на консоли разработчика

<section class="menu-section">
  <div class="menu-section__header">
    <h2>Non-Alcoholic</h2>

  </div>
  <ul>
    <li class="menu-item">
      <p class="menu-item__heading">No Mas</p>
      <p>Pear, Citrus, Rose, Lemon, Yogurt</p>
      <p class="menu-item__details menu-item__details--price">
      </p>
    </li>
    <li class="menu-item">
      <p class="menu-item__heading">Ginger Jammer</p>
      <p>Ginger, Mango, Togarashi, Lime, Soda</p>
      <p class="menu-item__details menu-item__details--price">
      </p>
    </li>
    <li class="menu-item">
      <p class="menu-item__heading">Hojito</p>
      <p>Hoja Santa, Lime, Tonic, Seasonal Herbs</p>
      <p class="menu-item__details menu-item__details--price">
      </p>
    </li>
  </ul>
</section>

Ответы [ 2 ]

0 голосов
/ 21 апреля 2020

Вы помещаете стиль в тег span на живом сайте с этим именем класса .menu-item__currency

Вы можете использовать это имя класса или добавить новый тег и добавить свойство float:left с этим классом, Я думаю, тогда проблема решится.

0 голосов
/ 21 апреля 2020

В «Песочнице» в заголовке отсутствует ширина.

    p.menu-item__heading {
    width: 100%;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...