Distorted Image (added by rich text editor) in the mobile version

Solved
Highlighted
Tourist
10 0 2

Hi there!

I am working in my webpage and I decided to use the rich text editor to add images with links for new collections.

The Desktop View is okay, however when I change it to the mobile version they look distorted.

Desktop viewDesktop viewMobile viewMobile view 

Hope there is a solution without having to change the pictures completely.

Thanks!

0 Likes
Highlighted
Tourist
10 0 2

I am using Brooklyn Theme and the webpage link isxn-2i0b75ttzb5vk.myshopify.com (We just started, don't have domain yet)

1 Like
Highlighted
Shopify Partner
2451 533 676

Hey, @killa14 

Please share correct webshop URL 

I will check and provide you solution here.

Thanks!

 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
10 0 2

https://xn-2i0b75ttzb5vk.myshopify.com/

Since it is not public yet, it has a password: whahnt

0 Likes
Highlighted
Shopify Partner
2451 533 676

This is an accepted solution.

Hey @killa14 

add code assets/timber.scss.liquid bottom of the file

img, iframe {
max-width: 100%;
height: auto;
}

Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Tourist
10 0 2

Thanks a lot!

It worked! The pictures aren't distorted anymore, however they look a little bit smaller than in the desktop version, is there any way to change their size?

small.png

Thanks a lot again!!

0 Likes
Highlighted
Shopify Partner
2451 533 676

Hey

add code assets/timber.scss.liquid bottom of the file

For desktop version 

@media screen and (min-width: 1240px){
img, iframe {max-width: 100%;width: 220px;height: 220px;}
}

for mobile  version

@media screen and (max-width: 754px){
img, iframe {max-width: 100%;height: auto;}
}

Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Shopify Partner
2451 533 676

Please do like and accept as solution. That will cost of our time :)

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Highlighted
Tourist
10 0 2

Thanks for your quick reply,

I added the code, but it looks still the same. Probably is the size of pictures. When I added the desktop version code, the pictures looked distorted (actually no need to change the desktop version), but for the mobile version, pictures still look small. So using the code you sent above, I change the percentage to 140%, and it made them bigger, but i don;t think that is the correct way, since the pictures moved to the right and even got cropped a little bit.

Hope there is another solution. 

After added codeAfter added codeAfter having changed the 100% value of the code, to 140%After having changed the 100% value of the code, to 140%

Thanks once again!  

0 Likes