Topic: Images on Mobile Site Are Stretched

Posted under General

Sanic

Member

I noticed there was a new update with terms and conditions. I’m using the mobile site on a pretty old device, so that probably isn’t helping; Thumbnails appear fine for me, but when I click through to open a post, the image is now stretched vertically and distorted. I played with the view options (fit horizontally/vertically) without any luck. It worked fine on this device before. If I view full screen it appears normally as before, but I have to do it every time.

I’m not sure if something was recently updated, as I recall something similar happening earlier this year after a site update. I believe someone wrote a script or something that I plugged into the CSS settings which fixed it last time, but I’m not smart enough to know what it’s doing. Do I need to take this out of the CSS override to fix it?

@ media (min-width: 474px) {
article.thumbnail {
width: min-content;
}
}

article.thumbnail {
max-width: 150px;
min-height: unset !important;
min-width: unset !important;
}

article.thumbnail a {
height: unset !important;
max-height: unset !important;
max-width: unset !important;
width: unset !important;
}

article.thumbnail img {
max-height: 150px;
max-width: 150px;
height: unset !important;
object-fit: unset !important;
pointer-events: none;
width: 100%;
}

@media (min-width: 474px){
article.thumbnail:not(.deleted) img {
width: unset;
}
}

section.posts-container {
grid-template-columns: repeat(3,1fr) !important;
--thumb-image-size: 150px;
}

@media (min-width: 474px) {
section.posts-container {
grid-template-columns: repeat(auto-fill,minmax(var(--thumb-image-size),1fr));
}
}

article.thumbnail .desc {
height: unset !important;
}

.post-thumbnail.dtext img {
max-height: 150px;
max-width: 150px;
width: auto;
height: auto;
}

#image-container.blacklisted img.post-thumbnail-img, #image-container.blacklisted video, .post-thumbnail.blacklisted img.post-thumbnail-img, .post-thumbnail.blacklisted video {
padding: 150px 150px 0 0!important;
background-size: contain;
}

article.thumbnail.deleted img{
width: calc(90vw / 3);
max-width: 150px;
}

Jelloponies

Admin

sanic said:
I noticed there was a new update with terms and conditions. I’m using the mobile site on a pretty old device, so that probably isn’t helping; Thumbnails appear fine for me, but when I click through to open a post, the image is now stretched vertically and distorted. I played with the view options (fit horizontally/vertically) without any luck. It worked fine on this device before. If I view full screen it appears normally as before, but I have to do it every time.

I’m not sure if something was recently updated, as I recall something similar happening earlier this year after a site update. I believe someone wrote a script or something that I plugged into the CSS settings which fixed it last time, but I’m not smart enough to know what it’s doing. Do I need to take this out of the CSS override to fix it?

If you're using a custom CSS script that's most likely what causes some compability issues. Try disabling it and see if it works.

Sanic

Member

Yeah unfortunately no luck with that. So far I’ve noticed that lower resolution posts are fine. As long as the dimensions are like less than 1200 x 1200.

It’s so weird, like something broke the script that automatically resizes the images to the default 850px sample post size... It’s just fully stretching the image vertically when displaying higher resolution images. The horizontal seems fine. It seems to be ignoring the drop down selection for the default aspect ratio/proportions or whatever.

It’s fine on my other mobile device so I’ll just have to deal with it I guess.

Updated