How to optimize image for mobile? (Narrative Theme)

Solved
Thevyvy
Excursionist
36 0 6

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
Belgacem
Excursionist
25 6 12
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
Thevyvy
Excursionist
36 0 6

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

The password is "aleang" .

 

Thank you for your help!

0 Likes
Belgacem
Excursionist
25 6 12

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
Thevyvy
Excursionist
36 0 6

It worked, thank you!

0 Likes
Belgacem
Excursionist
25 6 12

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
NatalieMarya
New Member
2 0 0

Hi, I was wondering if you could help me. 

I am trying to optimise for mobile with the slideshow option, I tried to use this code but it didnt work. Any other recommendations?

0 Likes