How do I align my Breadcrumb with page width dynamically?

Store Design
, ,
1

Hi guys!

I want to align my Breadcrumb with page width without need of padding or any other workaround.

miltokas_0-1705655714543.png
miltokas_0-1705655714543.png985×458 79.3 KB

my current code in base.css

.breadcrumb {
margin: 0 auto !important;
max-width: var(--page-width);
}

There: Dawn

Website: www.vengastore.com

2

Hi @miltokas

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

nav.breadcrumb {

width: 100% !important;

padding: 0 15rem !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

3

@PageFly-Henry thanks a lot for your answer.

I have added the code you provided but it is still misaligned:

miltokas_1-1705657381369.png
miltokas_1-1705657381369.png946×780 85.4 KB

4

Please try again with this code:

nav.breadcrumb {
width: 85%!important;

}

5

I have tried but still a bit off.

My question is, can I automatically align with the theme page width?

Thanks!

miltokas_0-1705790739594.png
miltokas_0-1705790739594.png1085×453 37.1 KB

6

Yes, you can try changing the width parameter in my code to make it more suitable for you.