Supply theme - Margin below the breadcrumbs

New Member
10 0 0

I'm using the supply theme and I notice there is a 60px margin below the breadcrumbs navigation element:

 

ship.png

 

In chrome I inspect to find the html element:

<nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">...</nav>

 

The related classes as shown by the inspector are:

css.png

 

What do I need to add to theme.scss.liquid to keep the margin below the breadcrumbs at 30px margin bottom on all displays, and not 60px on large displays?

 

 

 

0 Likes
Shopify Partner
164 34 56

Please share url I can guide you better with that. Thanks

Problem Solved? ✔️Accept the solution so you can help others.
* Email: fayyazraza@gmail.com * Skype: fayyaz_raza
0 Likes
Shopify Partner
164 34 56

you need to remove the margin 60px and it will be fine on all the devices

Problem Solved? ✔️Accept the solution so you can help others.
* Email: fayyazraza@gmail.com * Skype: fayyaz_raza
0 Likes
Highlighted
New Member
10 0 0

Yes so what css do I use to do that. It is only becoming 60px in wide display. 30px is what I want for all display widths.

0 Likes
Shopify Partner
164 34 56

Please share url and I will give you exact solution. You wanted to have 30px margin on all the devices. Once you remove the margin 60px from media query. The other 30px margin will take place. 

Problem Solved? ✔️Accept the solution so you can help others.
* Email: fayyazraza@gmail.com * Skype: fayyaz_raza
0 Likes
New Member
10 0 0

Ok so do I change that in the main scss file?

 

An example page from our site as follows, but I have already pin pointed the code in my OP.

https://joggers-world.myshopify.com/pages/about-us

 

Pw has been emailed to you.

0 Likes
Shopify Partner
164 34 56

Please add this css in theme.scss file 

 

@media screen and (min-width: 769px)
.template-page .breadcrumb, .template-product .breadcrumb {
    margin-bottom: 30px;
}
Problem Solved? ✔️Accept the solution so you can help others.
* Email: fayyazraza@gmail.com * Skype: fayyaz_raza
0 Likes
New Member
10 0 0

When I enter this at the end of theme.scss it breaks the css for the whole theme. I had thought this was the solution as well, but css stops working.

0 Likes