Image displayed incorrectly on Mobile due to theme settings

UX
1

Discourse Version: discourse (19b4116)

Seems to be a problem with only some image uploads.

File%2012-02-2018%2C%2014%2053%2021
File%2012-02-2018%2C%2014%2053%2021640×1136 410 KB

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%;
}
2

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

2 Likes
3

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?

4 Likes
4

Is this theme related? Does this happen in safe mode? How to use Discourse Safe Mode

3 Likes
5

Ok, so something is modifying the default theme…

The safe mode 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 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.

1 Like