How can I fix the banner height issue on mobile for my website?

Technical Q&A
,
1

I’m using two banners, one at the home page and one at the atristries page. On desktop they render fine, but on mobile, only the top of the video is visible.

On the artistries page, the banner image should not be cropped to only the center of the image, but the full width should be visible

Could you help me?

https://theartofparts.com

2

Hey @tim101

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 tag

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

Best Regards,
Moeed

3

Hi @Moeed ,

Thanks for your quick reply. The image is indeed on screen, but it doesn’t maintain the aspect ratio of the image.

The video didn’t change unfortunately

4

I fixed the image myself by adding

height: auto

after

object-fit: fill;

I’ll try and fix the video myself too

To fix the video it was a case of adding

.video-section__media > video:nth-child(1) {
width: 200vw;
}

To the media, complete snippet:

@media screen and (max-width: 768px) {
        .banner__media.media.animate--fixed.scroll-trigger.animate--fade-in img {
            object-fit: fill;
            height: auto
        }

        .video-section__media > video:nth-child(1) {
          width: 200vw;
        }
      }