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

Store Design
, , , , , , ,

Topic summary

A Shopify store owner using the Broccoli theme is experiencing banner display issues on mobile devices. The banner appears correctly on desktop but doesn’t render properly on mobile.

Problem Details:

  • The theme lacks a built-in banner template with separate mobile/desktop controls
  • Current banner template doesn’t respond appropriately to mobile screen sizes
  • Screenshots show the desktop vs. mobile display discrepancy

Proposed Solutions:

Two community members offered CSS-based fixes:

  1. First approach: Add custom CSS code in the theme.liquid file, placed above the closing </head> tag

  2. Second approach (more detailed):

    • Navigate to: Shopify Admin → Online Store → Theme → Edit code
    • Locate the base.css or theme.css file
    • Insert media query code at the bottom targeting .ltn__slider-area class
    • Code sets max-width to 600px, height to 300px, and adjusts background-position by 3%

Both solutions involve adding responsive CSS to control banner dimensions specifically for mobile viewports. The issue remains open pending implementation and feedback from the original poster.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

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
i1.JPG1346×610 89.3 KB

i2.JPG
i2.JPG352×457 26.7 KB

2

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 tag

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

3

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
HDLShin_0-1715385952522.png1902×899 133 KB

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
HDLShin_1-1715386026428.png1057×828 245 KB

Hope it can help you
Kind regards,
HDL-Shin