How can I adjust breadcrumb indentation and font size?

Hi there,

I want to change the indentation of my breadcrumbs to the right but I don’t know how.

I also would like to reduce the font size of the breadcrumbs text.

There: Dawn

Website: www.vengastore.com

My Breadcrumbs code is placed in breadcrumbs.liquid:

{% unless template == ‘index’ or template == ‘cart’ or template == ‘list-collections’ %}

Home {% if template contains 'page' %} {{ page.title }} {% elsif template contains 'product' %} {% if collection.url %} {{ collection.title | link_to: collection.url }} {% endif %} {{ product.title }} {% elsif template contains 'collection' and collection.handle %} {% if current_tags %} {% capture url %}/collections/{{ collection.handle }}{% endcapture %} {{ collection.title | link_to: url }} {{ current_tags | join: " + " }} {% else %} {{ collection.title }} {% endif %} {% elsif template == 'blog' %} {% if current_tags %} {{ blog.title | link_to: blog.url }} {{ current_tags | join: " + " }} {% else %} {{ blog.title }} {% endif %} {% elsif template == 'article' %} {{ blog.title | link_to: blog.url }} {{ article.title }} {% else %} {{ page_title }} {% endif %} {% endunless %}
  1. Go to online store
  2. Click on Edit Code
  3. Open your base.css file
  4. Paste the below code at the bottom and save

.breadcrumb {margin-left: 50px; font-size: 1.1rem;}

You can change the 50px and 1.1rem value to your desired value.

Let me know if I managed to help you by accepting this as a solution.

Hi Natasha!

Yes, that worked perfectly.

Can I instead of adding a margin, align with the Collection grid?

Because in case the user zooms the screen the margin will be misaligned.

Basically my question is, how to I align the breadcrumb with the collection grid?

Still misaligned with the page width