Hello,
I am struggling with a blog in the Label Theme.
The blog is setup no problem and I am using a Grid Layout
When on mobile all the grid categories are horizontal across the top and you have to slide on your phone to see them.
I tried to add some custom CSS code but that didn’t seem to solve my problem.
/* Media query for screens with a maximum width of 767px (typical mobile screens) */
@media screen and (max-width: 767px) {
.pb-8 nav ul.flex.lg\:flex-wrap.lg\:justify-start.-mx-2.lg\:-mx-4 {
display: block; /* Vertical layout for mobile */
}
.pb-8 nav ul.flex.lg\:flex-wrap.lg\:justify-start.-mx-2.lg\:-mx-4 li {
margin-right: 0; /* Remove right margin for vertical layout */
margin-bottom: 5px; /* Add bottom margin to separate categories vertically */
}
}
I also tried to look at the liquid for the sidebar and change that but I think this liquid only helps if i have it as list with sidebar and not grid.
<div class="lg:col-span-3 lg:col-end-13 space-y-8" data-color-scheme="primary">
<div>
<h2 class="font-secondary border-b-theme-width border-scheme-border pb-2">{{ 'blogs.sidebar.recent_articles' | t }}</h2>
<ul class="mt-4 mb-8">
{% for article in blogs[blog.handle].articles limit: 6 %}
<li class="mt-3">
<a href="{{ article.url }}" class="block hover:text-scheme-text">{{ article.title }}</a>
<time class="text-scheme-meta text-sm mt-2" datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: format: 'month_day_year' }}</time>
</li>
{% endfor %}
</ul>
</div>
{% if blog.all_tags.size > 0 %}
<div>
<h2 class="font-secondary border-b-theme-width border-scheme-border pb-2">{{ 'blogs.sidebar.categories' | t }}</h2>
<ul class="mt-4 mb-8">
{% if current_tags %}
<li>
<a class="border-b-text-width border-transparent inline-block py-1" href='{{ blogs[blog.handle].url }}'>{{ 'blogs.sidebar.all_tags' | t }}</a>
</li>
{% else %}
<li>
<span class="border-b-text-width border-scheme-text inline-block py-1">
{{ 'blogs.sidebar.all_tags' | t }}
</span>
</li>
{% endif %}
{% for tag in blog.all_tags %}
{% if current_tags contains tag %}
<li>
<span class="py-1 inline-block hover:text-scheme-accent border-b-text-width border-scheme-text">{{ tag }}</span>
</li>
{% else %}
<li>{{ tag | link_to_tag: tag | replace: 'title=', 'class="py-1 inline-block hover:text-scheme-accent border-b-text-width border-transparent" title=' }}</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% endif %}
<p>
<a class="font-secondary text-scheme-meta text-sm" href="{{ shop.url }}{{ blogs[blog.handle].url }}.atom" target="_blank">{{ 'blogs.sidebar.rss' | t }}</a>
</p>
</div>
If anyone has any ideas how I can get the blog categories when in grid to appear as a vertical list instead of the horizontal scroll that would be a huge help.