Image issue on mobile - Narrative theme

[EugeneLand]

Hello! 

I am having an issue with "image with text" section. The picture on mobile screen is cropped from top and bottom. 
It works perfectly fine in the desktop. 

I have seen similar questions here, but their solutions did not help me. 

Can anyone please assist? 

Here's the store: https://www.myclipped.com 
Password: nahffe

[dmwwebartisan · Accepted solution]

@EugeneLand 

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

@media only screen and (max-width: 749px){
#shopify-section-feature-row-0 .feature-row__image-crop--none .feature-row__image {
    height: 370px !important;
}
}

Hope this works.

Thanks!

[KetanKumar · Accepted solution]

@EugeneLand 

sorry for this issue please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 749px) {
.feature-row__image-crop--none .feature-row__image {
    height: 350px;
}
}

[Natztech · Accepted solution]

hello @EugeneLand 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 @media only screen and (max-width: 749px){
          .template-index   .feature-row__image-crop--none .feature-row__image {
            height: 350px !important;
}
}

[EugeneLand]

Hi! Yes, it worked for the first section of the "image with text". Thank you very much! 

The other section are not affected, maybe you can tell if there's a way how to apply this all sections of this kind?

Thanks a lot! 

[Natztech · Accepted solution]

hello @EugeneLand 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of th

 @media only screen and (max-width: 749px){
          .template-index   .feature-row__image-crop--none .feature-row__image {
            height: 450px !important;
}
}

[EugeneLand]

Thank you very much! I understood the math behind the "image with text" section.
Can I use the same for the "Gallery"? Because the pictures there are also cropped:( 

[KetanKumar · Accepted solution]

@EugeneLand 

thanks for update

@media only screen and (max-width: 749px) {
.image-bar--small .image-bar__content {
    height: 330px;
}
}

[Natztech · Accepted solution]

hello @EugeneLand 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste the below code at the bottom of the file.

@media screen and (max-width: 769px){
#shopify-section-gallery .image-bar.image-bar--gallery .image-bar__content.image-bar__overlay{
      height: 500px !important;
}
}

[EugeneLand]

Thank you very much, Natztech! 

Everything works great!

If you could tell me how to do the same thing for the featured slider on the home page, so that it doesn't crop pictures in mobile mode?