View Collection" Button Misaligned on Mobile for Image Banner

shoplibrastudio
Tourist
6 0 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

Reply 1 (1)

BSS-Commerce
Shopify Expert
3380 447 499

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 

Hope it helps @shoplibrastudio 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development