css issue with responsive design in shopify
I am trying to get responsive footer in shopify. The thing that bothers me is this:
<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>
The links in footer are out generated and I am piping them.
.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: "|";
}
When resolution is mobile it does not disply ok as words are not breaked in new line.
How to deal with this that per li it will auto break in new line words when this is needed.
I manage to get this:
But the thing is that I do not know how to pipe this corretly. thank you.
tnx
miha
html css responsive-design shopify
asked Nov 24 '18 at 20:21
Miha ZoubekMiha Zoubek
716
add a comment |
I am trying to get responsive footer in shopify. The thing that bothers me is this:
<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>
The links in footer are out generated and I am piping them.
.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: "|";
}
When resolution is mobile it does not disply ok as words are not breaked in new line.
How to deal with this that per li it will auto break in new line words when this is needed.
I manage to get this:
But the thing is that I do not know how to pipe this corretly. thank you.
tnx
miha
html css responsive-design shopify
asked Nov 24 '18 at 20:21
Miha ZoubekMiha Zoubek
716
What would you like for the result? "Način plačila" and "Dostava" to be in separate lines? Did I understand that correctly?
– Nemanja Glumac
Nov 24 '18 at 20:27
No, I need like this (when there is not enough width). Exp "Vracila 'n' Reklamacije | Nacin 'n' plaiča | Dostava | Kontakt". So when there is not enought width i need to brake it new line, so that whole "ul" stay in the same line.
– Miha Zoubek
Nov 25 '18 at 7:53
add a comment |
I am trying to get responsive footer in shopify. The thing that bothers me is this:
<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>
The links in footer are out generated and I am piping them.
.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: "|";
}
When resolution is mobile it does not disply ok as words are not breaked in new line.
How to deal with this that per li it will auto break in new line words when this is needed.
I manage to get this:
But the thing is that I do not know how to pipe this corretly. thank you.
tnx
miha
html css responsive-design shopify
asked Nov 24 '18 at 20:21
Miha ZoubekMiha Zoubek
716
I am trying to get responsive footer in shopify. The thing that bothers me is this:
<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>
The links in footer are out generated and I am piping them.
.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: "|";
}
When resolution is mobile it does not disply ok as words are not breaked in new line.
How to deal with this that per li it will auto break in new line words when this is needed.
I manage to get this:
But the thing is that I do not know how to pipe this corretly. thank you.
tnx
miha
html css responsive-design shopify
html css responsive-design shopify
asked Nov 24 '18 at 20:21
Miha ZoubekMiha Zoubek
716
asked Nov 24 '18 at 20:21
Miha ZoubekMiha Zoubek
716
edited Nov 27 '18 at 20:49
Miha Zoubek
asked Nov 24 '18 at 20:21
Miha ZoubekMiha Zoubek
716
asked Nov 24 '18 at 20:21
Miha ZoubekMiha Zoubek
716
asked Nov 24 '18 at 20:21
Miha ZoubekMiha Zoubek
716
716
What would you like for the result? "Način plačila" and "Dostava" to be in separate lines? Did I understand that correctly?
– Nemanja Glumac
Nov 24 '18 at 20:27
No, I need like this (when there is not enough width). Exp "Vracila 'n' Reklamacije | Nacin 'n' plaiča | Dostava | Kontakt". So when there is not enought width i need to brake it new line, so that whole "ul" stay in the same line.
– Miha Zoubek
Nov 25 '18 at 7:53
add a comment |
What would you like for the result? "Način plačila" and "Dostava" to be in separate lines? Did I understand that correctly?
– Nemanja Glumac
Nov 24 '18 at 20:27
No, I need like this (when there is not enough width). Exp "Vracila 'n' Reklamacije | Nacin 'n' plaiča | Dostava | Kontakt". So when there is not enought width i need to brake it new line, so that whole "ul" stay in the same line.
– Miha Zoubek
Nov 25 '18 at 7:53
What would you like for the result? "Način plačila" and "Dostava" to be in separate lines? Did I understand that correctly?
– Nemanja Glumac
Nov 24 '18 at 20:27
What would you like for the result? "Način plačila" and "Dostava" to be in separate lines? Did I understand that correctly?
– Nemanja Glumac
Nov 24 '18 at 20:27
No, I need like this (when there is not enough width). Exp "Vracila 'n' Reklamacije | Nacin 'n' plaiča | Dostava | Kontakt". So when there is not enought width i need to brake it new line, so that whole "ul" stay in the same line.
– Miha Zoubek
Nov 25 '18 at 7:53
No, I need like this (when there is not enough width). Exp "Vracila 'n' Reklamacije | Nacin 'n' plaiča | Dostava | Kontakt". So when there is not enought width i need to brake it new line, so that whole "ul" stay in the same line.
– Miha Zoubek
Nov 25 '18 at 7:53
add a comment |
1 Answer
1
active
oldest
votes
If I have understood your question, you have a few options here. I will assume that you are using "mobile-first" approach. Simply set li to block (the element will "live" on its own line) or set its width to 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" */
}
}
There's probably a dozen other ways to achieve this, but the point is the same. Target the element for widths that are "mobile" and make each li take the whole line for itself.
Flex-wrap will break the line only if there's not enough room for 2 elements to live together. It will not automatically break the line (by default). Hope this helps.
answered Nov 24 '18 at 20:48
Nemanja GlumacNemanja Glumac
519213
Maybe I did not express my self correctly. What I need to achive is that the linklist is one the same line (link1 link1 | link2 link2 | link3 link3), what bothers me is this. When there is enouht width due to mobile view, i need to brak words like "test n test | test2 n test2 | test3 n test3". This must be done auto based on width (I can not add "n")
– Miha Zoubek
Nov 25 '18 at 7:48
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53462033%2fcss-issue-with-responsive-design-in-shopify%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
If I have understood your question, you have a few options here. I will assume that you are using "mobile-first" approach. Simply set li to block (the element will "live" on its own line) or set its width to 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" */
}
}
There's probably a dozen other ways to achieve this, but the point is the same. Target the element for widths that are "mobile" and make each li take the whole line for itself.
Flex-wrap will break the line only if there's not enough room for 2 elements to live together. It will not automatically break the line (by default). Hope this helps.
answered Nov 24 '18 at 20:48
Nemanja GlumacNemanja Glumac
519213
Maybe I did not express my self correctly. What I need to achive is that the linklist is one the same line (link1 link1 | link2 link2 | link3 link3), what bothers me is this. When there is enouht width due to mobile view, i need to brak words like "test n test | test2 n test2 | test3 n test3". This must be done auto based on width (I can not add "n")
– Miha Zoubek
Nov 25 '18 at 7:48
add a comment |
If I have understood your question, you have a few options here. I will assume that you are using "mobile-first" approach. Simply set li to block (the element will "live" on its own line) or set its width to 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" */
}
}
There's probably a dozen other ways to achieve this, but the point is the same. Target the element for widths that are "mobile" and make each li take the whole line for itself.
Flex-wrap will break the line only if there's not enough room for 2 elements to live together. It will not automatically break the line (by default). Hope this helps.
answered Nov 24 '18 at 20:48
Nemanja GlumacNemanja Glumac
519213
Maybe I did not express my self correctly. What I need to achive is that the linklist is one the same line (link1 link1 | link2 link2 | link3 link3), what bothers me is this. When there is enouht width due to mobile view, i need to brak words like "test n test | test2 n test2 | test3 n test3". This must be done auto based on width (I can not add "n")
– Miha Zoubek
Nov 25 '18 at 7:48
add a comment |
If I have understood your question, you have a few options here. I will assume that you are using "mobile-first" approach. Simply set li to block (the element will "live" on its own line) or set its width to 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" */
}
}
There's probably a dozen other ways to achieve this, but the point is the same. Target the element for widths that are "mobile" and make each li take the whole line for itself.
Flex-wrap will break the line only if there's not enough room for 2 elements to live together. It will not automatically break the line (by default). Hope this helps.
answered Nov 24 '18 at 20:48
Nemanja GlumacNemanja Glumac
519213
If I have understood your question, you have a few options here. I will assume that you are using "mobile-first" approach. Simply set li to block (the element will "live" on its own line) or set its width to 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" */
}
}
There's probably a dozen other ways to achieve this, but the point is the same. Target the element for widths that are "mobile" and make each li take the whole line for itself.
Flex-wrap will break the line only if there's not enough room for 2 elements to live together. It will not automatically break the line (by default). Hope this helps.
answered Nov 24 '18 at 20:48
Nemanja GlumacNemanja Glumac
519213
edited Nov 24 '18 at 21:06
answered Nov 24 '18 at 20:48
Nemanja GlumacNemanja Glumac
519213
answered Nov 24 '18 at 20:48
Nemanja GlumacNemanja Glumac
519213
answered Nov 24 '18 at 20:48
Nemanja GlumacNemanja Glumac
519213
519213
Maybe I did not express my self correctly. What I need to achive is that the linklist is one the same line (link1 link1 | link2 link2 | link3 link3), what bothers me is this. When there is enouht width due to mobile view, i need to brak words like "test n test | test2 n test2 | test3 n test3". This must be done auto based on width (I can not add "n")
– Miha Zoubek
Nov 25 '18 at 7:48
add a comment |
Maybe I did not express my self correctly. What I need to achive is that the linklist is one the same line (link1 link1 | link2 link2 | link3 link3), what bothers me is this. When there is enouht width due to mobile view, i need to brak words like "test n test | test2 n test2 | test3 n test3". This must be done auto based on width (I can not add "n")
– Miha Zoubek
Nov 25 '18 at 7:48
Maybe I did not express my self correctly. What I need to achive is that the linklist is one the same line (link1 link1 | link2 link2 | link3 link3), what bothers me is this. When there is enouht width due to mobile view, i need to brak words like "test n test | test2 n test2 | test3 n test3". This must be done auto based on width (I can not add "n")
– Miha Zoubek
Nov 25 '18 at 7:48
Maybe I did not express my self correctly. What I need to achive is that the linklist is one the same line (link1 link1 | link2 link2 | link3 link3), what bothers me is this. When there is enouht width due to mobile view, i need to brak words like "test n test | test2 n test2 | test3 n test3". This must be done auto based on width (I can not add "n")
– Miha Zoubek
Nov 25 '18 at 7:48
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53462033%2fcss-issue-with-responsive-design-in-shopify%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What would you like for the result? "Način plačila" and "Dostava" to be in separate lines? Did I understand that correctly?
– Nemanja Glumac
Nov 24 '18 at 20:27
No, I need like this (when there is not enough width). Exp "Vracila 'n' Reklamacije | Nacin 'n' plaiča | Dostava | Kontakt". So when there is not enought width i need to brake it new line, so that whole "ul" stay in the same line.
– Miha Zoubek
Nov 25 '18 at 7:53