How do I align breadcrumbs on mobile to the left? Debut theme.

Solved

Hello,

I just installed this piece of code to my theme.liquid file which worked great in terms of now having breadcrumbs on my Debut theme. I wrapped it into the <main> content wrapper like this (I bolded the code I added):

<main class="main-content js-focus-hidden" id="MainContent" role="main" tabindex="-1">
<style>
.breadcrumbs {
margin-left: 130px;
margin-bottom: 15px;
}

.breadcrumbs__list {
list-style-type: none;
margin: 0;
padding: 0;
}

.breadcrumbs__item {
display: inline-block;
}

.breadcrumbs__item:not(:last-child):after {
border-style: solid;
border-width: .10em .10em 0 0;
content: '';
display: inline-block;
height: .20em;
margin: 0 .20em;
position: relative;
transform: rotate(45deg);
vertical-align: middle;
width: .20em;
}

.breadcrumbs__link {
text-decoration: underline;
}

.breadcrumbs__link[aria-current="page"] {
color: inherit;
font-weight: normal;
text-decoration: none;
}

.breadcrumbs__link[aria-current="page"]:hover,
.breadcrumbs__link[aria-current="page"]:focus {
text-decoration: underline;
}
</style>

{%- unless template == 'index' or template == 'cart' or template == 'list-collections' or template == '404' -%}
{%- assign t = template | split: '.' | first -%}

<nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
<ol class="breadcrumbs__list">
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="/">Home</a>
</li>
{%- case t -%}
{%- when 'page' -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ page.url }}" aria-current="page">{{ page.title }}</a>
</li>
{%- when 'product' -%}
{%- if collection.url -%}
<li class="breadcrumbs__item">
{{ collection.title | link_to: collection.url }}
</li>
{%- endif -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ product.url }}" aria-current="page">{{ product.title }}</a>
</li>
{%- when 'collection' and collection.handle -%}
{%- if current_tags -%}
<li class="breadcrumbs__item">
{{ collection.title | link_to: collection.url }}
</li>
<li class="breadcrumbs__item">
{%- capture tag_url -%}{{ collection.url }}/{{ current_tags | join: "+"}}{%- endcapture -%}
<a class="breadcrumbs__link" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + "}}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ collection.url }}" aria-current="page">{{ collection.title }}</a>
</li>
{%- endif -%}
{%- when 'blog' -%}
{%- if current_tags -%}
<li class="breadcrumbs__item">
{{ blog.title | link_to: blog.url }}
</li>
<li class="breadcrumbs__item">
{%- capture tag_url -%}{{blog.url}}/tagged/{{ current_tags | join: "+" }}{%- endcapture -%}
<a class="breadcrumbs__link" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + " }}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ blog.url }}" aria-current="page">{{ blog.title }}</a>
</li>
{%- endif -%}
{%- when 'article' -%}
<li class="breadcrumbs__item">
{{ blog.title | link_to: blog.url }}
</li>
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ article.url }}" aria-current="page">{{ article.title }}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ request.path }}" aria-current="page">{{ page_title }}</a>
</li>
{%- endcase -%}
</ol>
</nav>
{%- endunless -%}
{{ content_for_layout }}
</main>

The only thing I changed within this code is I changed the first 5 lines of code from this:

<style>
.breadcrumbs {
margin: 0 0 2em;
}

To this:

<style>
.breadcrumbs {
margin-left: 130px;
margin-bottom: 15px;
}

This change allowed me to align my breadcrumbs on desktop to match my content margins. But on mobile, my breadcrumbs are aligned to start in the center of the page. 

Desktop view:

Desktop-Breadcrumbs.PNG

Mobile view:

Mobile-breadcrumbs.png

I have already tried following this forum, along with about 4 others, did absolutely nothing to my mobile view.

My website is pinealvisionjewelry.com.

Thanks in advance!

Brittany Witt
0 Likes
taruunn
Excursionist
19 5 6
@media(max-width:767px){  
.template-product .breadcrumbs {
margin-left15px;
}
}
 
add this in your style.css or style.css.scss 
this code is for the product page only 
0 Likes
suyash1
Shopify Partner
2735 290 452

This is an accepted solution.

@Brittany_Witt - add this css to the very end of theme.css file and check

@media screen and (max-width:749px){
.breadcrumbs {margin-left: 5px !important;}
}
You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
dmwwebartisan
Shopify Partner
5841 1337 1714

@Brittany_Witt 

Please add the following code at the bottom of your assets/theme.scss.liquid or theme.css file.

@media only screen and (max-width: 749px){
.template-product .breadcrumbs{ margin-left: 25px !important; }
}

Hope this works. Thanks!  

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
Natztech
Shopify Partner
646 177 433

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 749px){
.template-product .breadcrumbs {
   width: 85% !important;
   margin: 0  auto !important;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store

@taruunn Thank you for your help, however, I was not able to find style.css or style.css.scss files for Debut theme. 

Brittany Witt
0 Likes

@suyash1 thank you so much for the help! It worked perfectly! This snippet of code looked very similar to the others I tried that didn't work so I was almost convinced this wouldn't work. But it did! Here's the result:

Screenshot_20210420-094505.png

Perhaps could you explain why the breadcrumbs underline the "Home" link? I would think it would underline the current page they are on, in this case, "Butterfly Choker Necklace". Is there a way to fix that?

@dmwwebartisan & @Natztech thank you for your help! I was not able to try your solutions as @suyash1's worked perectly. But I appreciate the help!

Brittany Witt
0 Likes
suyash1
Shopify Partner
2735 290 452

@Brittany_Witt - it is not because of active page, actually home link has separate class with underline property added than other links and hence it is showing underline.

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes