A user encountered a display issue where their Email Signup Banner image on the password/pre-subscribe page appeared correctly on desktop but was cropped awkwardly on mobile devices.
Initial Responses:
Solution Provided:
A CSS code snippet was shared to adjust the banner height specifically for mobile screens (max-width: 768px):
@media screen and (max-width: 768px){
body.password .banner__media.media {
height: 25rem !important;
}
}
Outcome:
The user successfully implemented the CSS fix by adding it to their Shopify theme’s Custom CSS section. The solution resolved the cropping issue, and the user confirmed it works as intended.
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! 
Hello @Nandor_1 ,
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?
If I want the site to look serious, it’s very important that it’s perfect everywhere.
its beecku
well could you solve it?
Hi @Nandor_1
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
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.
Hi @Nandor_1
To complete your requests, please follow these steps:
@media screen and (max-width: 768px){
body.password .banner__media.media {
height: 25rem !important;
}
}
Here is the result:
I hope this helps
Best,
Daisy
THANK YOU!!! IT WORKS!!!
