Проблема css с адаптивным дизайном в Shopify
Я пытаюсь получить отзывчивый нижний колонтитул в 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: "|";
}
Когда разрешение является мобильным, оно не отображается нормально, так как слова не переносятся на новую строку.
Как справиться с тем, что per li он автоматически прерывает слова новой строки, когда это необходимо.
Но дело в том, что я не умею это правильно пропустить. Спасибо.
tnx миха
Нет, мне вот так нужно (когда не хватает ширины). Exp "Vracila '\ n' Reklamacije | Nacin '\ n' plaiča | Dostava | Kontakt". Поэтому, когда недостаточно ширины, мне нужно тормозить ее новой строкой, чтобы весь "ul" оставался в той же строке.
Ответы 1
Если я понял ваш вопрос, у вас есть несколько вариантов. Я предполагаю, что вы используете подход «сначала мобильные». Просто установите 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 разорвет линию только в том случае, если для двух элементов недостаточно места для совместного проживания. Линия не разрывается автоматически (по умолчанию). Надеюсь это поможет.
Может, я неправильно выразился. Что мне нужно добиться, так это то, что список ссылок представляет собой одну и ту же строку (ссылка1 ссылка1 | ссылка2 ссылка2 | ссылка3 ссылка3), что меня беспокоит. Когда из-за мобильного просмотра ширина недостаточна, мне нужно тормозить такие слова, как «test \ n test | test2 \ n test2 | test3 \ n test3». Это должно быть сделано автоматически в зависимости от ширины (я не могу добавить "\ n")
Что бы вы хотели от результата? «Начин плачила» и «Достава» в отдельные строчки? Я правильно понял?