Image not fitting properly in Animated slider - Theme Impulse

Store Design
1

Hey guys.

I’ve made a CSS animation that continuously loops like a banner using a .Jpeg file. Everything worked fine but i didn’t like the resolution of the image. I was thinking about SVGs at first but shopify doesn’t natively support that format.

Anyways, I’ve scaled up the image and tried again and now it won’t fit properly into the banner anymore. I just want it shrunk down into the wrapper, thats it.

Any suggestions? :slightly_smiling_face:

Shop: click me

Password: siesoh

Thank you for any help! Ill make sure to upvote!

Ps: Changing the size also breaks the smooth animation loop. Its a pain.

s1.PNG
s1.PNG1920×328 151 KB

2

Hi!

First off you need to increase the height of the container by finding the following code and changing the value to 160px:

@media only screen and (min-width: 1140px)
.flex-grid__item--ceab453c-65b6-48f7-9ef6-0fd48baffc6f {
    min-height: 100px;
}

Next you need to target the actual image itself and edit the value of ‘object-fit’ to be contain:

.image-fit {
    position: relative;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: fill;
    font-family: "object-fit: cover";
    z-index: 1;
}

I think you would need to then create an image to fill that div width or shrink the size of the div as I’m not sure exactly how you’ve made it, but the above solutions will keep your image visible and within the container.

Alternatively, you could leave it as fill but the image looks very stretched.

1 Like
3

This sadly did not work.

4

Sorry, you need to remove the ‘height: 100%’ from the second code section I posted also, thought I’d put that in the original post

5

Apologies, also edit this to change height from ‘auto’ to 100%

.promo-grid__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 300%;
    height: auto;
    animation: slideshow 20s linear infinite;
    transform: translate3d(0, 0, 0);
}