How can I fix the mobile image displacement issue in custom CSS?

[rafal_Pyka]

Hi there,

i have this custom css which which has been added into base.css.

#shopify-section-template--21090851848488__image-banner .banner__content {
position: relative;
overflow: hidden;
min-height: 200px; /* Set a minimum height as needed for the banner */
}

#shopify-section-template--21090851848488__image-banner .banner__content:before {
content: "";
background-image: url(https://cdn.shopify.com/s/files/1/0828/9206/3016/files/encase_word.png?v=1695446228);
display: block;
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
top: 0;
left: 0;
opacity: 1;
}  

 This code basically places a logo over the top of an image banner section. everything is working fine except for once the website is in mobile mode. As soon as the width of the screen is small enough, the logo pops under the image banner rather than displaying above it. 

the image banner is set to be stationary on scroll so that the logo seems to be floating above it.

any ideas how i can fix this?

[Moeed]

Hey @rafal_Pyka 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

[rafal_Pyka]

https://www.encases.shop/ 
password is "rewfli" 

if you scroll towards the bottom of the homepage you will see the banner image with the floating logo.

Thanks heaps!

[Moeed]

Hey @rafal_Pyka 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
.banner__content.banner__content--middle-center.page-width.scroll-trigger.animate--slide-in {
    position: absolute !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[rafal_Pyka]

hi! this worked for the banner at the bottom, however it now breaks the banner image at the top of the page.