How to optimize image for mobile? (Narrative Theme)

Solved
Highlighted
Tourist
10 0 3

Hello,

I am using the Narrative Theme and I am wondering if there would be a way to optimize a Gallery image for mobile viewing? It displays perfectly on desktop but it gets cropped on mobile. I have resolved this issue for some other of my background images by cropping them into multiple images so it displays well on mobile. But for this particular one, it can't be cropped as there is a sentence and the 3 images need to be next to each other so it makes sense. 

Thank you!

Screen Shot 2020-07-12 at 2.03.08 PM.pngScreen Shot 2020-07-12 at 2.03.20 PM.png

0 Likes
Highlighted
Hello @Thevyvy  , 
 

Welcome to the Shopify community! and Thanks for your question.
Please share your site URL,So I will check and provide a solution here , if you have front end password is confidential so please to a personal message as you like.

Belgacem

 
Belgacem Ben ltaif
Web consultant /Shopify Expert/ CTO Powerful Consulting
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
https://about.me/benltaif
0 Likes
Highlighted
Tourist
10 0 3

This is the link to my website: https://gymelectronics.com/

The password is "aleang" .

 

Thank you for your help!

0 Likes
Highlighted

This is an accepted solution.

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.

@include media-query($small) {
   .image-bar--small .image-bar__content{
       height: 95px;
  }
}

 

Thx

Belgacem Ben ltaif
Web consultant /Shopify Expert/ CTO Powerful Consulting
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
https://about.me/benltaif
1 Like
Highlighted
Tourist
10 0 3

It worked, thank you!

0 Likes
Highlighted

hello @Thevyvy  , 

Nice !!  , If helpful then please Like and Accept Solution.  ? 

thx 

Belgacem Ben ltaif
Web consultant /Shopify Expert/ CTO Powerful Consulting
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
https://about.me/benltaif
1 Like