# Image displayed incorrectly on Mobile due to theme settings

**URL:** https://meta.discourse.org/t/image-displayed-incorrectly-on-mobile-due-to-theme-settings/80378
**Category:** UX
**Created:** [2월 12, 2018, 3:19오후 UTC](https://meta.discourse.org/t/image-displayed-incorrectly-on-mobile-due-to-theme-settings/80378 "2018-02-12T15:19:32Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [2월 12, 2018, 3:19오후 UTC](https://meta.discourse.org/t/image-displayed-incorrectly-on-mobile-due-to-theme-settings/80378/1 "2018-02-12T15:19:32Z")

</div>

Discourse Version: discourse ([19b4116](https://github.com/discourse/discourse/compare/19b4116...tests-passed))

Seems to be a problem with only some image uploads.

 ![File%2012-02-2018%2C%2014%2053%2021](https://global.discourse-cdn.com/meta/original/3X/3/b/3bc9564cc462c052cb6138db48a78f126580fc72.jpeg)

The following CSS added to the mobile css sheet fixes it for me:

```
.lightbox img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: 100%;
}

```

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2월 12, 2018, 11:35오후 UTC](https://meta.discourse.org/t/image-displayed-incorrectly-on-mobile-due-to-theme-settings/80378/2 "2018-02-12T23:35:02Z")

</div>

I’m not sure what exactly is being reported here, can you verify @awesomerobot?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2월 13, 2018, 12:51오전 UTC](https://meta.discourse.org/t/image-displayed-incorrectly-on-mobile-due-to-theme-settings/80378/3 "2018-02-13T00:51:29Z")

</div>

Hmm I’m not able to reproduce this (if I’m understanding correctly, the lightboxed image was wider than your screen?)… is it possibly related to customizations? Can you post an image you were having issues with here?

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2월 13, 2018, 1:04오전 UTC](https://meta.discourse.org/t/image-displayed-incorrectly-on-mobile-due-to-theme-settings/80378/4 "2018-02-13T01:04:24Z")

</div>

Is this theme related? Does this happen in [safe mode](https://meta.discourse.org/t/53504?silent=true)? [Using Safe Mode to troubleshoot issues with themes and plugins](https://meta.discourse.org/t/how-to-use-discourse-safe-mode/53504)

---

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [2월 13, 2018, 12:56오후 UTC](https://meta.discourse.org/t/image-displayed-incorrectly-on-mobile-due-to-theme-settings/80378/5 "2018-02-13T12:56:29Z")

</div>

Ok, so something is modifying the default theme..

The [safe mode](https://meta.discourse.org/t/53504?silent=true) worked, i’ll try disabling all themes and see what happens, thanks for your help.

So the theme I installed and modified was called Material, it has somehow changed the default theme

**Edit:** Found it! If it wasn’t for the [safe mode](https://meta.discourse.org/t/53504?silent=true) I would have been stumped for ages, thanks for your help, much appreciated.

```
.topic-body {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  background-color: lighten($secondary, 10%);
  margin-top: 10px;
  padding-left: 20px;
  border-radius: 2px;
  padding-right: 20px;
  padding-top: 5px;
}

```

I removed:

```
  padding-left: 20px;
  border-radius: 2px;
  padding-right: 20px;
  padding-top: 5px;

```

I’m still unsure how this was affecting the default theme when all other themes were disabled.