How to fix banner width in mobile site for Shopify broccoli theme

[Fahadhassan]

Hi everyone!

I'm working on a Shopify store using the Broccoli theme. Unfortunately, I couldn't find a built-in template for the banner. I ended up using a template that doesn't offer separate controls for mobile and desktop versions. The banner I created looks great on desktop, but it doesn't display correctly on mobile devices.

Could anyone advise on how to make the banner responsive for mobile? Store URL: https://nabatat.pk/

I've attached screenshots for reference.

                

[AnneLuo · Accepted solution]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
  @media (max-width: 767px) {
    .ltn__slide-item-2 {
        padding-top: 200px !important;
    }
  }
</style>

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[HDL-Shin]

Hi @Fahadhassan, 

You can try this code by following these steps:

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

Step 2: Search file base.css or theme.css 

Step 3: Insert the below code at the bottom of the file -> Save

@media only screen and (max-width: 600px) {
  .ltn__slider-area {
     height: 300px !important;
     background-position: 3% !important;
  }
}

Final Result :

Hope it can help you
Kind regards, 
HDL-Shin