Image streched in mobile view

Solved
Aleksy
Excursionist
21 0 0

I have a problem with image, the size is : 480x960

I put an image in a page and then I configure the size by code so it can fit perfectly the good dimension.

But the image is stretch in mobile view.

 

I don't know if it's because the image is long, maybe long images is not a good thing.

In desktop view, it's okay but in mobile view the image is stretched.

 

I'm confused about image dimension in shopify.

The url of the stretched image (in mobile view) :

https://20arhtxbyd9219ya-31264309293.shopifypreview.com/pages?preview_key=57f8119a0f18ef82f49415178d...

 

Thank you and sorry for my bad english !

Accepted Solutions (2)

Accepted Solutions
Wahab_Ahmad
Shopify Partner
722 112 178

This is an accepted solution.

Hello @Aleksy,

 

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste below code at bottom of file

 

@media only screen and (max-width: 768px) {
img, iframe {
object-fit: cover !important;
}
}


Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

 

View solution in original post

Wahab_Ahmad
Shopify Partner
722 112 178

This is an accepted solution.

Hello @Aleksy,

 

Replace previous with this

 

@media only screen and (max-width: 768px) {
img, iframe {
object-fit: contain !important;
height: auto !important;
}

View solution in original post

Replies 6 (6)
Wahab_Ahmad
Shopify Partner
722 112 178

This is an accepted solution.

Hello @Aleksy,

 

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste below code at bottom of file

 

@media only screen and (max-width: 768px) {
img, iframe {
object-fit: cover !important;
}
}


Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

 

View solution in original post

Aleksy
Excursionist
21 0 0

thank you a lot thats working !

But now the image is cut off like that

Screenshot_20200321-165728_Samsung Internet.jpg

Wahab_Ahmad
Shopify Partner
722 112 178

This is an accepted solution.

Hello @Aleksy,

 

Replace previous with this

 

@media only screen and (max-width: 768px) {
img, iframe {
object-fit: contain !important;
height: auto !important;
}

View solution in original post

Aleksy
Excursionist
21 0 0

that's perfect thank you

iyoniajackson
Tourist
4 0 0

Hello there, could you help me with a similar issue. instead of an enlarge picture my picture is smaller!

 

Firefox_Screenshot_2020-04-08T03-01-03.376Z.png

Cayla77
Tourist
4 0 2

This saved me! thank you so much for this information.

I appreciate you:-)