Banner Image/text Does Not Resize Properly For Mobile view

Hi everyone! My banner image is not resizing properly for mobile devices using the spotlight theme, it looks okay on desktop but on mobile it seems to move the text position below the image instead of centered on the image. I’ve tried a few different things but cant figure it out. Any suggestions would be appreciated? My shop is at https://8a30a3.myshopify.com/ Thanks in advance!

password: yohtre

Apply this code

@media (max-width: 767px) {
  .banner-text {
    text-align: center !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

Thanks a lot that worked great I appreciate your help.

1 Like

Great

Where do you add it? I tried it on custom css for the specific image and it does not work