Solved

How can I add more padding to my breadcrumb area?

mandalabunny
Visitor
2 0 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-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;
}
Accepted Solution (1)

PageFly-Richard
Shopify Partner
4302 975 1629

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 10 (10)

Ahsan_ANC
Shopify Partner
1389 252 322

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

 

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search

PageFly-Richard
Shopify Partner
4302 975 1629

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

mandalabunny
Visitor
2 0 1

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
Shopify Partner
4302 975 1629

I'm glad to help you @mandalabunny  😉

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

nar_52
Excursionist
16 0 3

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
Shopify Partner
4302 975 1629

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

nar_52
Excursionist
16 0 3

Hi @PageFly-Richard ,

Thank you so much.

Kind regards.

PageFly-Richard
Shopify Partner
4302 975 1629

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

thejustintharpe
Explorer
59 8 10

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.

Please Like and Mark as Solution if Helpful.
Try for Free. The Most Supportive Product Page Modifier App

Apps Specialist

PaulNewton
Shopify Partner
6339 579 1349

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

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org