Images on Narrative theme

Solved
LIOR_SHAKUROV
Excursionist
13 0 3

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
HardikDavra
Shopify Partner
1897 300 817

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

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
LIOR_SHAKUROV
Excursionist
13 0 3
HardikDavra
Shopify Partner
1897 300 817

Please explain more with screenshots 

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
LIOR_SHAKUROV
Excursionist
13 0 3

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
HardikDavra
Shopify Partner
1897 300 817

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;
}
}
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
LIOR_SHAKUROV
Excursionist
13 0 3

Thank you very much

ChanFuts69
New Member
7 0 0

Hi can you help me please. My "Get Started" image in the gallery shows different size to different desktops.

Website: ecommerce-consulting-group.myshopify.com

Password: bleale

0 Likes
Algalsc
Excursionist
25 0 5

Hi, I'm having the same problem on my site: www.perfectdd.com where on desktop the images look fine, almost like a square but on mobile, it looks landscape and cuts of my images. Can you please help? Screenshots below:


DESKTOP

Algalsc_0-1617820482794.png

MOBILE

Algalsc_1-1617820522142.png

 

0 Likes
HardikDavra
Shopify Partner
1897 300 817

@ChanFuts69 Store is currently unavailable.
screenshot-ecommerce-consulting-group.myshopify.com-2021.04.08-09_26_44.png

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes