How can I add more padding to my breadcrumb area?

Technical Q&A

Topic summary

Issue: User needs to adjust breadcrumb positioning—specifically adding right margin and bottom spacing to prevent overlap with product images on desktop, with minor mobile adjustments needed.

Root Problem Identified: The breadcrumb <nav> element incorrectly contained all main content (nested structure error), and the page-width class was missing or misconfigured.

Solutions Provided:

  • Add CSS to base.css targeting .breadcrumb with margin-left and margin-bottom properties
  • Fix HTML structure by closing </nav> tag after breadcrumbs
  • Add page-width class to the <nav> element
  • Use media queries for device-specific adjustments (desktop vs. iPad)

Resolution: Original poster confirmed the solution worked after implementing the structural fixes and CSS adjustments. A later user encountered similar issues that were resolved by correcting their page-width settings in layout configuration.

Key Technical Notes:

  • Padding controls internal spacing within elements; margin controls external spacing between elements
  • Media queries enable responsive adjustments for different screen sizes
  • Proper HTML nesting is critical before applying CSS fixes
Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

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-steel-hooks-version-2

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;
}
2

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;
}}
3

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

2 Likes
4

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.

  1. Add the class “page-width” to your “” tag.

That’s it. It should solve your issue.

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

5

Hi @mandalabunny

It looks like you’ve accidently nested the entirety of the main content to be inside the breadcrumbs 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;
}
6

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

1 Like
7

I’m glad to help you @mandalabunny :wink:

8

Edit:

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

@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?

9

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

1 Like
10

Hi @PageFly-Richard ,

Thank you so much.

Kind regards.

1 Like
11

You’re welcome @nar_52 . I’m glad that I can help :blush: