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

[kingdom2]

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

[Made4uo-Ribe]

Hi @kingdom2 

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

Thanks!

[kingdom2]

Hey @Made4uo-Ribe 

Sure, here it is:

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

[Made4uo-Ribe]

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:

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

[Sweans · Accepted solution]

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

[kingdom2]

Thanks @Sweans !