Assistance Needed to Resolve Image Banner Display Issue on Mobile & Web

[shoplibrastudio]

Hello Shopify Community,

I’m encountering a challenge with the image banner section of my Shopify store, specifically when viewed on mobile devices. Despite several attempts to adjust the CSS, the banner either doesn’t display correctly or has alignment and sizing issues.

Issue Description:

• On mobile devices, the image banner is not taking up the entire section as intended. There’s unwanted space at the top, and the layout doesn’t appear as expected.
• Additionally, the “View Collection” button is not correctly centered on the image.

What I’ve Tried:

• Adjusting the CSS for .banner__media and .banner__content classes using media queries.
• Setting display, width, height, and object-fit properties for the banner.
• Using absolute positioning and transform to center the content and the button.

Unfortunately, these changes haven’t resolved the issue. I am seeking guidance on how to correct this so that the banner displays properly on mobile devices, with the button correctly centered.

My website is ShopLibrastudio.com

[iffikhan30]

Hello @shoplibrastudio ,

1. Go to you banner liquid.

2. Remove css 100vh and 50vh

When i removed the css on inspect element it’s look good check the screenshot.

3. View collection button already centered.

[shoplibrastudio]

Hmm it dosent look like i have as much code as you in my banner.liquid. See attachment. Can you advise if I am in the right place? Also it is for the 2nd banner that is on the page further down the page. See screenshot

[iffikhan30]

Hello Open a wrong file, file name image-banner.liquid beside the banner.liquid.