How can I resize and reposition my mobile breadcrumb banner?

Store Design
1

Hello,

I want to re-position my breadcrumb banner on mobile. You can see the 2 reference images and understand whats currently happening with the banner.

I need help on mobile version only, the banner is repositioning itself to completely crop out the image of the model. I want to re-position and re-size it on mobile so it shows up properly.

website: www.sundustalpur.com

storefront pass: ord

2

@jsaeed

Please add following css code your assets/theme.scss.liquid bottom of the file.

@media screen and (max-width: 768px) {
#shopify-section-breadcrumb #breadcrumb.page-header {
    text-align: center;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin: 0 auto;
    background-image: url(//cdn.shopify.com/s/files/1/0573/7129/5908/files/Silver_collection_banner_1920_x_600.jpg?v=1638440959);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center;
}
}

Thanks!

3

Thanks alot @dmwwebartisan