My custom liquid banner is too big on mobile

Store Design

Topic summary

A user is experiencing issues with a custom liquid banner displaying too large on mobile devices and has shared a screenshot demonstrating the problem.

Proposed Solutions:

  • Apply inline CSS with width: 100% to the image element
  • Alternatively, add a CSS class to the image and assign styling through that class
  • Add custom CSS code to the theme’s base.css file, including:
    • Width set to 100% for the banner section
    • Hidden horizontal overflow to prevent scrolling
    • Media query targeting screens with max-width of 767px

Implementation Steps:
Navigate to Online Store → Theme → Edit code, then open the base.css file to paste the provided CSS snippet.

The discussion remains open with no confirmation yet on which solution was implemented or whether the issue was resolved.

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

I have a banner that needs to be resized for mobile but I’m not sure how to do this, this is what my banner looks like on mobile. How can I fix this? My site is www.siaqa.com

IMG_0641.jfif
IMG_0641.jfif1242×2208 124 KB

2

Use inline css width 100% to image

or add class and assign css to it.

1 Like
3

Hello @elliot14

You can add code by following these steps to change ATC background color

  1. Go to Online Store → Theme → Edit code.

  2. Open your base.css file

  3. Paste the below code at below

@media screen and (max-width:767px){

.focus-none {
overflow-x: hidden;
}
.section-template–20099116663112__fd6fb992-a495-4df9-9486-4c2efdc5053f-padding img {
width: 100%;
}

}

1 Like