View Collection" Button Misaligned on Mobile for Image Banner

Technical Q&A

Topic summary

A Shopify store owner reports that their “View Collection” button displays correctly on desktop but appears misaligned on mobile devices, positioned in the center of the image banner and obstructing the view.

Technical Details:

  • Issue affects mobile view only (desktop alignment is correct)
  • Button placement disrupts the banner’s aesthetics and layout
  • Store URL: shoplibrastudio.com

Proposed Solution:
A community member (BSS-Commerce) provided CSS code to fix the alignment:

  • Uses a media query targeting screens up to 749px width
  • Applies a transform: translateY(115px) property to reposition the button
  • Code should be inserted into the theme’s CSS file

The solution includes a screenshot showing the corrected result. The discussion appears resolved with a working technical fix provided.

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

Hello Shopify Community,

I’m experiencing an issue with the “View Collection” button on the image banner of my Shopify store. While it displays correctly on the desktop version, the button is misaligned on the mobile version, appearing right in the middle of the picture, which obstructs the view.

Issue Details:

  • On desktop view, the “View Collection” button is correctly aligned and doesn’t interfere with the image.
  • On mobile view, the button is positioned directly in the middle of the image, which is not ideal for the layout and aesthetics of the banner.

I’m looking for advice on how to correctly position the “View Collection” button for the mobile view so that it complements the banner without obstructing the image. If anyone has suggestions or solutions for adjusting the button’s placement effectively on mobile devices, it would be greatly appreciated.]

my shops website is : shoplibrastudio.com

Screen Shot 2023-12-18 at 5.21.25 PM.png
Screen Shot 2023-12-18 at 5.21.25 PM.png914×846 387 KB

2

Hi @shoplibrastudio ,

Insert this CSS into your CSS file:

@media only screen and (max-width: 749px) {
  #Banner-template--21738484236562__e09c2927-0530-4d43-8aa8-cdea5e6f8822 .banner__box {
    transform: translateY(115px) !important;
  }
}

Result:

view - 2023-12-20T164028.315.png
view - 2023-12-20T164028.315.png671×953 292 KB

Hope it helps @shoplibrastudio