Image issue on mobile - Narrative theme

Solved
EugeneLand
Tourist
6 0 4

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
Shopify Partner
8460 1985 2666

This is an 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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
KetanKumar
Shopify Partner
22472 2277 8367

This is an 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;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Natztech
Shopify Partner
1890 492 1170

This is an 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;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
EugeneLand
Tourist
6 0 4

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
Shopify Partner
1890 492 1170

This is an 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;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
EugeneLand
Tourist
6 0 4

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
Shopify Partner
22472 2277 8367

This is an accepted solution.

@EugeneLand 

thanks for update

@media only screen and (max-width: 749px) {
.image-bar--small .image-bar__content {
    height: 330px;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Natztech
Shopify Partner
1890 492 1170

This is an 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;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
EugeneLand
Tourist
6 0 4

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?