Issue with displaying list

[miha1234]

Hello

I would like to disply my menu with ul/li. The thing is that li is generated and I can not break in new line words when there is issue with width.

Here is the trouble that i am seeing: https://www.dropbox.com/s/4f1cnf4g8spml84/slika.JPG?dl=0

my code:

            {% if linklists[section.settings.footer_linklist].links.size > 0 %}
            
  
            

                {% for link in linklists[section.settings.footer_linklist].links %}
                  

                    {{ link.title }}
                  
                {% endfor %}
              
            
           {% endif %}      
        

@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" */
  }
}

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

.footer-costume{
   @media screen and (min-width: 200px) and (max-width:900px) {
    text-align: center;
  }

   @media screen and (min-width: 901px) and (max-width:2200px) {
    text-align: center;
    // display:none !important;
  }

}

.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: "|";
}

thank you!
miha

[Beverleyh]

Try mocking up the issue in a live CodePen demo – code is easier for us to troubleshoot there. Note that we only need the minimal amount of CSS and HTML to illustrate the problem. We don’t need your whole codebase.

[miha1234]

Hello

the link is here: https://codepen.io/miha-/pen/jQeExB

How in this case postion “pipe” that it will look nice :)

thank you.

[Beverleyh]

Hmmm, the demo doesn’t look anything like the image, and the “pipe” displays fine there. Unfortunately, we can’t troubleshoot code that doesn’t illustrate the problem. Please provide the CSS that is causing the undesirable menu/list behaviour as shown in your image. You might need to inspect each element in the Developer Toolbar (F12) and take applied styles from there.

[miha1234]

Hello

https://codepen.io/miha-/pen/yQRRNp

hope this is better. Only difference in my case is that i have on my dev site:

.footer_pipe + .footer_pipe::before {
content: “|”;
}

but in here i posted only
.footer_pipe::before {
content: “|”;
}

is the upper css this not work. My main issue is how to align this that it will look nice and the words will be position centered (that are in two lines).

thank you!

[miha1234]

Also forgot to write that when the page is resized that “|” is always in the middle.
thank you!

[Beverleyh]

What about;

.site-footer__linklist-item{
  display: flex;
  align-items:center;
}

[miha1234]

@Beverleyh thank you so much for that. just one thing, now when you resize page “|” is not always in the middle, how to achive that?

br
miha

[Beverleyh]

I don’t understand what you mean – the “|” is always in the vertical middle.

Have you forgotten to include any media queries that somehow change the display at narrower screen widths?

Or do you mean that, horizontally, the “|” sits flush against the text at one side? That’s down to only having margin on the left side of your links.

[Author]

Posts