Banner Image/text Does Not Resize Properly For Mobile view

Store Design
, , ,
1

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

2

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;
  }
}
3

Thanks a lot that worked great I appreciate your help.

1 Like
4

Great

5

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