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 …

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 !im…

You can try this code Go to Online Store-> Theme->Edit code 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…

Hi @mandalabunny You need to do a couple of things here… Add a </nav> right after you’re done with your breadcrumbs HTML code. 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.

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 …

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

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

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 …

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="/"] { …

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

How can I add more padding to my breadcrumb area?

Technical Q&A

nar_52 December 9, 2022, 10:37am 10

Hi @PageFly-Richard ,

Thank you so much.

Kind regards.

Topic		Replies	Views
How can align the breadcrumbs with the beginning of page width? Store Design menu , design , header , landing-page , css , metafields , troubleshooting , product-page	5	63	September 9, 2024
Help request for breadcrumb padding/ margins in dawn theme Store Design design , css	6	66	March 21, 2024
Help Styling Breadcrumbs with css Prestige Store Design	6	104	July 19, 2021
How do I align my Breadcrumb with page width dynamically? Store Design design , header , customizations	5	73	January 25, 2024
Add padding to mobile version Store Design design , customizations , third-party-themes , product-page	8	73	September 15, 2024

How can I add more padding to my breadcrumb area?

Related topics