How can I add more padding to my breadcrumb area?

[mandalabunny]

I'm new to editing code but managed to add breadcrumbs and change some things (including padding between the links) but cannot figure out how to change padding for the entire breadcrumbs area. I need it to be a little more to the right, and more padding below so it isn't right on top of the product image. This is more of a desktop issue, but mobile could use a smaller adjustment.

Here is a link to a product page: https://mandalabunnyhome.com/products/macrame-wood-earrings-with-tassels-hypoallergenic-stainless-st...

I purchased my theme and it doesn't have a theme.css file, I did the current formatting in base.css. I edited the padding between the links using this:

nav.breadcrumb, nav.breadcrumb a.Breadcrumbs, nav.breadcrumb span {
  margin-left: 10px;
  margin-right: 10px;
}

[Ahsan_ANC]

You can try this code

1. Go to Online Store-> Theme->Edit code
2. Asset-> base.css ->paste the below code at the bottom of the file.

@media only screen and (min-width: 768px){
.breadcrumb {
    margin-left: 49px !important;
    margin-bottom: 16px !important;
}}
@media only screen and (max-width: 768px){
.breadcrumb {
    margin-left: 15px !important;
    margin-bottom: 5px !important;
}}

[PageFly-Richard · Accepted solution]

Hi @mandalabunny 

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->base.css ->paste bellow code in top of file

.breadcrumb a[href="/"] {

    margin-left: 50px !important;

}

.page-width {

    margin-top: 40px !important;

}

@media screen and (max-width: 767px){
.breadcrumb a[href="/"] {
margin-left: 18px !important;
}
}

Hope that my solution works for you.

Best regards,

Richard | PageFly

[mandalabunny]

You are a life saver! My jaw dropped when it worked because I've tried so many things that didn't help, thank you!!

[PageFly-Richard]

I'm glad to help you @mandalabunny  😉

[nar_52]

Edit:

i found the problem. My page width was wrong. Now your solution works perfect 🙂

@PageFly-Richard  Thanks you.

If somebody has the same issue. Don't forget to check your layout -> page width.

Hi Richard,

i' have a similar problem. Your solution works only for mobile in my case.

I want the breadcrumb to line up with the rest on the left side, but currently it is far to the left.

• If insert your solution  with 200px instead of 40 px :

          .breadcrumb a[href="/"] {

          margin-left: 240 px !important;

           }

          in this case it will align on my desktop, but on an ipad screen it is far to right.

• If insert your solution with 50px instead of 40 px :

         .breadcrumb a[href="/"] {

          margin-left: 50 px !important;

           } 

          in this case it will align on an ipad screen, but on desktop  it is still far to left.

May i ask, if you have any suggestions to fix the problem?

[PageFly-Richard]

Hi @nar_52,

I’m Richard Nguyen from PageFly - Shopify Page Builder App

If you want to align the iPad without affecting the desktop, you can try with this code:     

@media screen and (min-device-width: 767x)
         and (max-device-width: 1023px){
               .breadcrumb a[href="/"] {
           margin-left: 50 px !important;
            }
      }

You will still keep the same alignment code for the desktop and add the above code to be able to align for the iPad.

Hope that my solution works for you.

Best regards,
Richard | PageFly

[nar_52]

Hi @PageFly-Richard ,

Thank you so much.

Kind regards.

[PageFly-Richard]

You're welcome @nar_52 . I'm glad that I can help 😊

[thejustintharpe]

Hi @mandalabunny 

You need to do a couple of things here...

1. Add a

</nav>

right after you're done with your breadcrumbs HTML code.

2. Add the class "page-width" to your "<nav>" tag.

That's it. It should solve your issue.

If it doesn't work - please let me know.

[PaulNewton]

Hi @mandalabunny 

It looks like you've accidently nested the entirety of the main content to be inside the breadcrumbs <nav> element.

You need to fix that before anything as it will cause issues with trying to get some css stuff to behave.

It also looks like the margin or padding that should be around the main content has been messed with basically removing the page bleed would normally help to keep things like the breadcrumb inset to the right away from the right edge. 

But that should be fixable by putting the .page-width class on the nav element or it's parent section element.

Padding is basically an elements internal space around it's content.

Margin is basically external space between elements.

To push content away from the nav element

.nav.breadcrumb {
 margin-bottom: 10px;
}