css проблема с адаптивным дизайном в shopify - PullRequest
Новая
       5

css проблема с адаптивным дизайном в shopify

0 голосов
/ 24 ноября 2018

Я пытаюсь получить отзывчивый нижний колонтитул в shopify.Меня беспокоит то, что: 

 <ul class="footer-costume_ul site-footer__linklist{% unless section.settings.footer_newsletter_enable %} site-footer__linklist--center{% endunless %}">
            {% for link in linklists[section.settings.footer_linklist].links %}
              <li class="site-footer__linklist-item footer_pipe">
                <a class="footer_a" href="{{ link.url }}"{% if link.active %} aria-current="page"{% endif %}>{{ link.title }}</a>
              </li>
            {% endfor %}
          </ul>

Ссылки в нижнем колонтитуле сгенерированы, и я передаю их. 

.footer-costume_ul{
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style: none;

}


.footer_a {
     margin-left: 1rem;
}

.footer_pipe + .footer_pipe::before {
  padding-rigt:10px;
  content: "|";
}

Когда мобильное разрешение, оно не выглядит как словане прерываются в новой строке.

enter image description here

Как справиться с этим, что per li будет автоматически разрываться в словах новой строки, когда это необходимо.

Мне удается получить это: enter image description here

Но дело в том, что я не знаю, как правильно это передать.спасибо.

тнх миха

1 Ответ

0 голосов
/ 24 ноября 2018

Если я понял ваш вопрос, у вас есть несколько вариантов здесь.Я предполагаю, что вы используете подход «сначала по мобильному».Просто установите li на block (элемент будет «жить» на собственной линии) или установите его ширину на flex-basis: 100%. 

.site-footer__linklist-item {
  display: block;
  width: 100%;
  /* flex-basis: 100%; // this is alternative */
}

@media screen and (min-width: 480px) {
   /* please note that 480px is arbitrary. You decide on the breaking point. */

  .site-footer__linklist-item {
    display: inline-block;
    width: auto
    /* flex-basis: auto; // you can use "auto" or "initial" */
  }
}

Возможно, существует еще дюжина других способов добиться этого, ноДело в том же.Задайте для элемента ширину, которая является «мобильной», и заставьте каждый li взять всю строку для себя.

Flex-wrap нарушит черту, только если недостаточно места для двух элементов, чтобы жить вместе.Это не будет автоматически ломать линию (по умолчанию).Надеюсь, это поможет.

...