Images become a squared image on mobile view

support
1

I noticed many uploaded images are being compressed to a “square” image in mobile view.
May I know if this an expected design or result of a setting?
Thanks a lot!

Mobile view:
image
PC view of the same image:

image
image925×460 145 KB

2

Uploading an image to confirm

image

This image was uploaded from my phone iPhone running iOS 14, and it came out fine, maybe the image is being compressed on your phone before it is uploaded? It works fine for me.

What browser and version are you using? And what phone OS and version are you on?

1 Like
3

Note that it’s the same image both times, just viewed on mobile? It looks like the aspect ratio / height calculation got messed up.

4

Thanks for replying.

I dont think it’s being compressed, as I uploaded a screenshot directly.

The browser I used on PC is Chrome.
For phone, its Android10.

This is the link for the troubled image that I posted:

Maybe you want to check if you encounter the same issue with the image in the link above?

5

Yeah, it is the same image, but it appears differently on PC and Mobile.

6

It’s because of CSS rules from a custom theme/component:

// Theme: 表情大小
// Target: mobile scss
// Last Edited: 2016-02-10 14:39:25 UTC

div.contents.regular > div > p > img{
    height:100px;
    width:100px;
}
div.d-editor-container > div.d-editor-preview-wrapper > div > p > img{
    height:100px;
    width:100px;
}
2 Likes
7

Thank you so much for finding out the root cause! However, I am still confused over where can I find this rule. Do you have any idea how this can be edited or changed?

8

In your admin pane, go to Customize, Themes. Select the proper theme or component, click on Edit CSS/HTML, then check the CSS Tab, probably in the Mobile top tab. You should find the corresponding CSS code written somewhere and you can either comment or delete it:

(here it is commented)

// Theme: 表情大小
// Target: mobile scss
// Last Edited: 2016-02-10 14:39:25 UTC
/*
div.contents.regular > div > p > img{
    height:100px;
    width:100px;
}
div.d-editor-container > div.d-editor-preview-wrapper > div > p > img{
    height:100px;
    width:100px;
}*/
4 Likes
9

Yes, removing it has solved the issue. Thanks a bunch!

10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.