Narrative theme: images are cropped on the desktop version ( mobile and laptop are ok )

Store Design
1

Hi! My website images look good on mobile and laptop, but are cropped on desktop. If anyone can help me with some code that would be awesome.

Here I leave my URL https://estudiozet.com/ and some images of the main problem.

Thanks!

Screen Shot 2022-01-27 at 4.47.17 PM.png
Screen Shot 2022-01-27 at 4.47.17 PM.png1785×862 132 KB

Screen Shot 2022-01-27 at 4.48.38 PM.png
Screen Shot 2022-01-27 at 4.48.38 PM.png1147×765 259 KB

.
Screen Shot 2022-01-27 at 4.48.18 PM.png
Screen Shot 2022-01-27 at 4.48.18 PM.png371×612 86.6 KB

1 Like
2

@natsolano01 ,

Please add this CSS to your theme

@media (min-width: 1440px){
    .image-bar--medium .image-bar__content {
        height: 750px;
    }
    .image-bar--large .image-bar__content{
        height: 1250px;
    }
}
@media (min-width: 2560px){
    .image-bar--medium .image-bar__content {
        height: 1000px;
    }
}

Thanks!

3

@natsolano01

Please add the following CSS code to your assets/theme.scss.liquid bottom of the file.

@media (min-width: 1440px){
    .image-bar--medium .image-bar__content {
        height: 750px;
    }
    .image-bar--large .image-bar__content{
        height: 1250px;
    }
}
@media (min-width: 2560px){
    .image-bar--medium .image-bar__content {
        height: 1000px;
    }
}

Thanks!

1 Like
4

Thanks a lot!!

It works perfectly!

1 Like