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
597 86 127

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.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
Highlighted
Shopify Partner
597 86 127

Please explain more with screenshots 

If this solution works, then please accept it as solution and like.
For theme customization, please contact 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
597 86 127

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.
For theme customization, please contact parambabla.soft@gmail.com
Highlighted
Tourist
9 0 1

Thank you very much