Issue: The hero slideshow is designed to “bleed” (overlap) into the header on desktop, but adding a separate mobile banner stopped the bleed on mobile.
Context: CSS in base.css was used to switch desktop vs. mobile banners, and additional CSS enabled the bleed effect. The store URL (meitonics.com) and screenshots of the CSS and visual result were provided. Images/screenshots are central to understanding the layout and code context.
Fix: A recommendation was made to add code to the theme.liquid file to address the mobile bleed behavior. Although the exact snippet isn’t included in the thread text, the change targeted mobile styling/structure at the theme level rather than only base.css.
Outcome: After adding the theme.liquid code, the mobile bleed issue was resolved, and the solution was confirmed by the requester.
Status: Resolved. No further action items or disagreements. Unanswered detail: the precise code snippet is not visible in the shared conversation.
Hello! I managed to find a few codes that made the hero banner on my site bleed into the header section,
But when i include a separate code that allows me to show a different banner for mobile view, it doesnt bleed correctly anymore.
Anyone can tell me what css code I can use to fix this? I tried playing with top-padding.
Thanks
You need to add some CSS for the mobile version. Can you share your store URL?
Hi @azamgill , here is the store url meitonics.com
-edited-
For additional context,
This is the code used for separating the desktop and mobile banner in base.css
and this code was used for bleeding it to the header
Please add this code to your theme.liquid file to solve the issue with your mobile.
Thanks @Dan-From-Ryviu , this worked for me!
Happy I could help 