Hello
I’m having trouble making my top banner not get cropped on mobile view. I believe my image is the right size (1200x600). I read previous posts about adding a liquid code into the Assets folder. I did that but nothing changed. Is there something else to do afterwards? Or was that fix specific for another theme?
Thank you!
Hi @SixthMoonPress
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.
You can follow these suggestion:
Go to Themes => edit code => Find base.css
=> Find the code:
.media > img {
object-fit: cover;
object-position: center center;
transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
=> Replace with
.media > img {
object-fit: fill;
object-position: center center;
transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
Thank you
That’s a lot better, but on mobile while the whole banner is visible, the aspect ratio is off, and the image is being vertically stretched. Is there any way to address that?
Thank you again
I Googled the CSS keywords and I ended using the ‘contain’ keyword instead of ‘fill.’
It’s not perfect, but it will do. Thank you.
