Breadcrumb Alignment for Collection and Product Pages

[manbru]

Hey,

I have added code to align the breadcrumbs on the collection page with a 350px margin-left.

However, on the product page, I want the breadcrumbs to have a 70px margin-left but haven’t been able to achieve that.

This code is my current code and the one that I only want on the collection page:

<style>
@media (min-width: 769px) {
.breadcrumbs {
  margin-left: 350px;
}
}
</style>

But on the product page i want the breadcrumbs to have a 70px margin-left.

Here's the collection page: https://r1vex.myshopify.com/collections/all 

Here's the product page: https://r1vex.myshopify.com/products/akpase-rondane-frost-raven-black 

On collection page, good:

On product page, not good:

Thanks for helping!

 

[Moeed]

Hey @manbru 

Replace your current code with this code

{% if template == 'collection' %}
<style>
@media (min-width: 769px) {
.breadcrumbs {
  margin-left: 350px;
}
}
</style>
{% endif %}
{% if template.name == 'product' %}
<style>
  @media (min-width: 769px) {
    .breadcrumbs {
      margin-left: 70px;
    }
  }
</style>
{% endif %}

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Made4uo-Ribe · Accepted solution]

Hi @manbru 

Check this one. 

Paste it on the theme.liquid. 

{% if template.name == 'product' %}
<style>
  @media (min-width: 769px) {
    .breadcrumbs {
      margin-left: 70px;
    }
  }
</style>
{% endif %}

And save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!