Password Page another picture for phone

[Nandor_]

Hi everyone, hope you are having a great day!

I set the image for the Email Signup Banner, it looks very good lying down. But when I switch to phone view it cuts off the edge of the image, which is very ugly.

Is there any way to fix this? I have tried a bunch of things.

Thanks in advance! ❤️

[DaisyVo · Accepted solution]

Hi @Nandor_ 

Please share your store link so I can take a closer look

Best,

Daisy

[Nandor_]

dianadwell.com

[DaisyVo]

Hi @Nandor_ 

The store is password-protected, please share the pass too

Best,

Daisy

[Nandor_]

its beecku

[Nandor_]

well could you solve it?

[DaisyVo]

Hi @Nandor_ 

 

If the image is displayed in full width, it will appear small like this. Do you still want to proceed it so we can provide you the code?

Best,

Daisy

[Nandor_]

the problem is not with the home page but with the password pre-subscribe page, as you can see it cuts off the edge of the image.

[DaisyVo]

Hi @Nandor_ 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

@media screen and (max-width: 768px){
body.password .banner__media.media {
    height: 25rem !important;
}
}

Here is the result: 

I hope this helps 

Best,

Daisy

[Nandor_]

THANK YOU!!! IT WORKS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[TaskHusky]

Hello @Nandor_ ,

Yes, there is away to fix this. it does require coding. 

Essentially you would have two images one for mobile and one for desktop. You would detect what the device size when the password page was browsed when the image is shown. 

The real question becomes how important is this to you and your success?

[Nandor_]

If I want the site to look serious, it's very important that it's perfect everywhere.