Image banner not showing up on mobile view

Store Design
, ,

Topic summary

Image banner not displaying on mobile for a Shopify store (108creations.com). Root cause traced to a CSS rule in the theme that hid the banner on mobile.

Key suggestions:

  • Insert additional code in theme.liquid before (details not provided).
  • Add a CSS override to force the banner section to display (display: block !important) for a specific selector.
  • Remove the problematic CSS rule identified via inspection (CSS = stylesheet rules controlling layout/visibility). A screenshot pinpointed the exact rule causing the hide.

Outcome:

  • Removing the offending CSS fixed the issue; the store owner confirmed the banner now shows on mobile.
  • The CSS override was acknowledged as a potential alternative, but not required after removing the conflicting rule.

Status: Resolved. No further action requested. Attachments (screenshots) were used to highlight the problematic CSS line responsible for the issue.

Summarized with AI on December 14. AI used: gpt-5.
1

Guys pls help. Image banner not showing up on mobile view. My site: 108creations.com

Screenshot 2024-11-13 at 10.22.07 AM.png
Screenshot 2024-11-13 at 10.22.07 AM.png2854×1544 371 KB

1 Like
2

Hello @margo141

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

1 Like
3

Hello @margo141

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css.
Add the provided code at the end of the file.

#shopify-section-template--17172089667721__image_banner_3MEcbe #Banner-template--17172089667721__image_banner_3MEcbe {
display: block!important;
}
4

Hi @margo141

I hope you are well.

Upon our checking, it has been caused by this code here:

image (6).png
image (6).png1576×776 172 KB

You just need to remove this code from your CSS file, then an issue can be resolved.

Please let me know if it works. Thank you!

Best,

Daisy - Avada Support Team.

1 Like
5

Thank you million times! It is working!

6

Thank you very much! That could be a solution too!

7

Hi @margo141

Thank you for your for your confirmation. Please let me know if you need anything else!

Best,

Daisy - Avada Support Team