I used some code that I found on this page to install breadcrumbs on our site.
It looks fine on desktop but it’s wonky on mobile. I’ve attached a screenshot of the weird spacing. Any ideas what I need to change the code to to get it to work?
This is the code I put in the post.hbs file:
{{!-- Breadcrumbs begining --}}
<ol class="gh-breadcrumbs" aria-label="You are here:">
<li>
<a href="{{ @site.url }}" aria-label="Home">Home</a>
</li>
{{#foreach tags limit='1'}}
<li>
<a href="{{ url }}">{{ name }}</a>
</li>
{{/foreach}}
<li>
<span class="gh-breadcrumbs-active">{{ title }}</span>
</li>
</ol>
{{!-- Breadcrumbs end --}}
This is the code I put in the Code injector on Ghost:
.gh-breadcrumbs{
list-style: none;
padding: 5;
margin: 0 0 2rem;
display: flex;
align-items: left;
gap: 0.5rem;
font-size: 1.4rem;
}
.gh-breadcrumbs li{
margin:0;
padding:0;
}
.gh-breadcrumbs li a{
opacity: .75;
}
.gh-breadcrumbs li + li::before {
content: ‘/’;
margin: 0 0.2em;
}
.gh-breadcrumbs-active{
opacity: .45;
}