Images on Narrative theme

Solved
Highlighted
Tourist
9 0 1

Hello, community. I have a few problems with images on the home page on the Narrative theme I will be happy for any advice.

I am also a beginner to HTML and CSS so I will be grateful for any advice on how to approach it.

1) I have 2 images in the gallery section. When I set it on my desktop I can play with the section height and make it look good to my screen sizes but when I review it from different sizes screen like a mobile the images look cropped. 

How do I set it so I will see the full image on all devices?

 

2) Same problem with the featured slider. The image looks cropped on the mobile.

3) the same problem with the image with the text section. The image looks cropped on mobile.

 

How do I set it so it will show the full image on any device?

 

Thank you in advance

 

0 Likes
Highlighted
Shopify Partner
697 104 204

Please provide website url and if your store is password protected then also provide password

If this solution works, then please accept it as solution and like.

If you want any Shopify theme customization, making Website, App development in iOS and Android, Please feel free to contact me.

Email: parambabla.soft@gmail.com
0 Likes
Highlighted
Highlighted
Shopify Partner
697 104 204

Please explain more with screenshots 

If this solution works, then please accept it as solution and like.

If you want any Shopify theme customization, making Website, App development in iOS and Android, Please feel free to contact me.

Email: parambabla.soft@gmail.com
0 Likes
Highlighted
Tourist
9 0 1

1) image not fully shown on mobile. Gallery section

Screenshot_20201025-094422.jpg

 2. Image not showing fully on mobile. Feature slider section.

Screenshot_20201025-094428.jpg

 

3. Image not fully shown. Image with text section.

Screenshot_20201025-094440.jpg

0 Likes
Highlighted
Shopify Partner
697 104 204

This is an accepted solution.

PLease place this code at the end of theme.scss

@media only screen and (max-width: 600px) {
#shopify-section-1603543108198a9092 .image-bar__item {
    background-size: contain;
}
#shopify-section-16035435334b5e9451 .featured-slider__cover-background-image {
    background-size: contain;
    background-repeat: no-repeat;
}
#shopify-section-1603548118dbb7a47a .feature-row__image {
    background-size: contain;
}
}
If this solution works, then please accept it as solution and like.

If you want any Shopify theme customization, making Website, App development in iOS and Android, Please feel free to contact me.

Email: parambabla.soft@gmail.com
Highlighted
Tourist
9 0 1

Thank you very much