Topic: css broke

Posted under General

after the latest site update, the css script that i stole took from the now-locked layout-change-containment-thread broke :/
were there any css tag changes that weren't listed or something to that effect?

oceanman666 said:
after the latest site update, the css script that i stole took from the now-locked layout-change-containment-thread broke :/
were there any css tag changes that weren't listed or something to that effect?

I mean... what did it do? Do you have the CSS?

without knowing what your CSS is or what it was supposed to do there's not really anything anyone can do to try to resolve... whatever your issue is.

I have something similar. I was using CSS that reverted the recent layout changes, but it seems yesterday's update messed with the card backgrounds and thumbnail previews. Not fatal, but the thumbnails not displaying properly is a big annoyance.

article img {
  pointer-events: unset;
}
.wiki-excerpt { display: none; }

@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;
    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;
}

Here's a fixed CSS:
post #4204011

@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;
    flex: 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;
}

Updated

theoldguy said:
Here's a fixed CSS:
post #4204011

@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;
    flex: 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;
}

That did the trick. Cheers, legend.

mklxiv said:
I mean... what did it do? Do you have the CSS?

i was going to do a quote/link to the original post, buut i got sidetracked and forgot
anyway, here's the css that i was/am using:

/* restore old layout */

@media (min-width: 800px) {
    body[data-st-contain="true"] article.thumbnail {
        min-height: unset;
        max-width: var(--thumb-image-size);
    }
}

body[data-st-contain="true"] article.thumbnail a { 
    background: unset;
    height: unset;
}

body[data-st-contain="true"] article.thumbnail img { 
    width: unset;
    max-width: 100%;
}

article.thumbnail .desc { 
    max-width: var(--thumb-image-size);
    height: unset;
}

/* make blacklisted avatars less scuffed */

.comment-post-grid .author-info .avatar .post-thumbnail.blacklisted img {
    padding: 150px 150px 0 0;
    background-size: 150px;
}

it made it so that there was far less deadspace on the site, pretty much reverting like most of the changes from 2 weeks ago (i think the blacklisted avatar thing got fixed, though, and probably isn't needed)
since about yesterday, it no longer appears to do... much of anything, really. i tried clearing my cache and stuff but nothing changed.

theoldguy said:
Here's a fixed CSS:
post #4204011

@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;
    flex: 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;
}

Worked flawlessly.