Solved

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

Fahadhassan
Shopify Partner
62 0 6

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.

 

i1.JPG                i2.JPG

Fadii
Accepted Solution (1)

AnneLuo
Shopify Partner
440 90 88

This is an 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!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee

View solution in original post

Replies 2 (2)

AnneLuo
Shopify Partner
440 90 88

This is an 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!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee

HDL-Shin
Shopify Partner
80 20 12

Hi @Fahadhassan

You can try this code by following these steps:

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

HDLShin_0-1715385952522.png

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 :

HDLShin_1-1715386026428.png

Hope it can help you
Kind regards, 
HDL-Shin

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
♥️♥️♥️ HDL-Shin || Shopify Partner ♥️♥️♥️