# Images become a squared image on mobile view

**URL:** https://meta.discourse.org/t/images-become-a-squared-image-on-mobile-view/167697
**Category:** Support
**Created:** [October 20, 2020, 3:58am UTC](https://meta.discourse.org/t/images-become-a-squared-image-on-mobile-view/167697 "2020-10-20T03:58:29Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![Xinweu\_Tang](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xinweu_tang/32/133609_2.png) [@Xinweu\_Tang](https://meta.discourse.org/u/Xinweu_Tang)
#### Post date: [October 20, 2020, 3:58am UTC](https://meta.discourse.org/t/images-become-a-squared-image-on-mobile-view/167697/1 "2020-10-20T03:58:29Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/c/a/ca9b49fc9eae77136d0e1f379b7e2433f7b2d640.png)  
PC view of the same image:  
 ![image](https://global.discourse-cdn.com/meta/original/3X/3/6/36a273c913e7526eb3244106151c15a139a11ed4.jpeg)

---

<div class="post-metadata">

### Author: ![osioke](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osioke/32/238946_2.png) [@osioke](https://meta.discourse.org/u/osioke)
#### Post date: [October 20, 2020, 10:35am UTC](https://meta.discourse.org/t/images-become-a-squared-image-on-mobile-view/167697/2 "2020-10-20T10:35:43Z")

</div>

~~Uploading an image to confirm~~

 ![image](https://global.discourse-cdn.com/meta/original/3X/6/9/692bf402cc7f1491c2423b748c19193ea3f11ec7.png)

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?

---

<div class="post-metadata">

### Author: ![riking](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/riking/32/170938_2.png) [@riking](https://meta.discourse.org/u/riking)
#### Post date: [October 20, 2020, 11:58am UTC](https://meta.discourse.org/t/images-become-a-squared-image-on-mobile-view/167697/3 "2020-10-20T11:58:33Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Xinweu\_Tang](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xinweu_tang/32/133609_2.png) [@Xinweu\_Tang](https://meta.discourse.org/u/Xinweu_Tang)
#### Post date: [October 20, 2020, 12:15pm UTC](https://meta.discourse.org/t/images-become-a-squared-image-on-mobile-view/167697/4 "2020-10-20T12:15:16Z")

</div>

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:

> **[【赛后总结】YGOPro全明星·十月预选赛：8强上位7种卡组，各种冷门绝活显现](https://ygobbs2.com/t/%E3%80%90%E8%B5%9B%E5%90%8E%E6%80%BB%E7%BB%93%E3%80%91ygopro%E5%85%A8%E6%98%8E%E6%98%9F%C2%B7%E5%8D%81%E6%9C%88%E9%A2%84%E9%80%89%E8%B5%9B%EF%BC%9A8%E5%BC%BA%E4%B8%8A%E4%BD%8D7%E7%A7%8D%E5%8D%A1%E7%BB%84%EF%BC%8C%E5%90%84%E7%A7%8D%E5%86%B7%E9%97%A8%E7%BB%9D%E6%B4%BB%E6%98%BE%E7%8E%B0/183953)**
>
> YGOPro全明星 第四届 十月预选赛 经过了一个月的10月表环境，各路上位选手在10月预选赛展现了自己的答案。 在10月11日的预选赛上，参赛卡组达到了前所未有的丰富。但冷门卡组多并不代表填海，8强上位中有7种不同卡组！ 本次比赛由变强哥池夕使用【调皮宝贝】夺冠。同时8强也包含了【未界域幻影彼岸】、【恐龙】、【龙女仆】和【自奏圣乐】卡组。 比赛成绩 冠军：池夕（调皮宝贝） 第二：星尘（自奏圣乐） 第三：jax（未界域幻影彼岸） 第四：光辉青苔（十二国） 第五：尘（神数） ...

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

---

<div class="post-metadata">

### Author: ![Xinweu\_Tang](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xinweu_tang/32/133609_2.png) [@Xinweu\_Tang](https://meta.discourse.org/u/Xinweu_Tang)
#### Post date: [October 20, 2020, 12:15pm UTC](https://meta.discourse.org/t/images-become-a-squared-image-on-mobile-view/167697/5 "2020-10-20T12:15:48Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [October 20, 2020, 12:55pm UTC](https://meta.discourse.org/t/images-become-a-squared-image-on-mobile-view/167697/6 "2020-10-20T12:55:26Z")

</div>

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

```scss
// 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;
}

```

---

<div class="post-metadata">

### Author: ![Xinweu\_Tang](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xinweu_tang/32/133609_2.png) [@Xinweu\_Tang](https://meta.discourse.org/u/Xinweu_Tang)
#### Post date: [October 20, 2020, 1:56pm UTC](https://meta.discourse.org/t/images-become-a-squared-image-on-mobile-view/167697/7 "2020-10-20T13:56:48Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [October 20, 2020, 2:02pm UTC](https://meta.discourse.org/t/images-become-a-squared-image-on-mobile-view/167697/8 "2020-10-20T14:02:50Z")

</div>

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)

```css
// 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;
}*/

```

---

<div class="post-metadata">

### Author: ![Xinweu\_Tang](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xinweu_tang/32/133609_2.png) [@Xinweu\_Tang](https://meta.discourse.org/u/Xinweu_Tang)
#### Post date: [October 20, 2020, 2:17pm UTC](https://meta.discourse.org/t/images-become-a-squared-image-on-mobile-view/167697/9 "2020-10-20T14:17:17Z")

</div>

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

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [November 19, 2020, 2:17pm UTC](https://meta.discourse.org/t/images-become-a-squared-image-on-mobile-view/167697/10 "2020-11-19T14:17:33Z")

</div>

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