Help with Breadcrumbs on site

Themes
1

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?

22A2FFCB-458C-4D76-8891-DDBCF7FB8E11 (1)
22A2FFCB-458C-4D76-8891-DDBCF7FB8E11 (1)828×1792 196 KB

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;
}

2

This CSS should improve the placement of the elements:

<style>
ol.gh-breadcrumbs {
    align-items: flex-start;
    padding: 0 20px;
    flex-wrap: wrap;
}
</style>
3

That worked. Thanks!