View Collection" Button Misaligned on Mobile for Image Banner

[shoplibrastudio]

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

 

[BSS-Commerce]

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:

 

Hope it helps @shoplibrastudio