How can align the breadcrumbs with the beginning of page width?

Store Design
, , , , , , ,
1

Hi guys!

How can I align the breadcrumbs with the beginning of the page width?

Thanks!

Page: https://kingdompetshop.com/collections/dog-collars-leashes

Theme: Refresh

Pw: abcd

kingdom2_0-1725818910182.png
kingdom2_0-1725818910182.png1800×846 108 KB

2

Hi @kingdom2

Do you have other URL? Or you can also share the preview.

Made4uoRibe_0-1725821176743.png
Made4uoRibe_0-1725821176743.png936×569 39.8 KB

Thanks!

3

Hey @Made4uo-Ribe

Sure, here it is:

https://4cseogt5pzwi55qj-90037223764.shopifypreview.com

4

Thanks for the info, check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

nav.breadcrumb {
   margin-left: 13rem;
}
@media only screen and (max-width: 989px){
   nav.breadcrumb {
   margin-left: 7rem;
}
}
@media only screen and (max-width: 769px){
   nav.breadcrumb {
   margin-left: 3rem;
}
}

And Sve.

result:

Made4uoRibe_0-1725826973058.png
Made4uoRibe_0-1725826973058.png1511×382 25.4 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

Hi @kingdom2 ,

You can make this change with a simple line of css.

.breadcrumb{
    width: var(--page-width);
    margin: 0 auto;
    padding-left: 5rem;
    padding-right: 5rem;
}
@media only screen and ( max-width: 889px) {
    width: var(--page-width);
    margin: 0 auto;
    padding-left: 3rem;
    padding-right: 5rem;
}

Paste this code to your base.css

Go to your online store> themes > Click on three dots of current active theme > edit code > search base.css in the left sidebar > open it and paste the code.

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

6

Thanks @Sweans !