My Tumblr site displays white behind transparent PNG's on mobile but not desktop, how can I fix this?

user_16264007 0
Viewed 80

I'm new to coding and only have basic knowledge of HTML and CSS. I'm currently trying to modify my Tumblr I made to display my artwork using custom HTML and CSS and I'm having an issue with my phone not displaying my PNG's transparencies correctly. I've been looking for awhile now and haven't seen a question like this.

Here's the link to my Tumblr: https://usercolby.com/

If you look at the posts on a desktop, the transparencies act fine. But if you visit my link on a phone, the posts with transparencies have white backgrounds. I don't know if this is a PNG issue or some kind of div with a white bg that's only visible on mobile.

See comparison here

Also this is the custom CSS I used to get rid of the white post background on Desktop:

.post-wrapper {
    **background: transparent;**
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    overflow: hidden;
    padding: 0;
    position: relative;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #eee;
    border: transparent;
}

The white bg on mobile seems to be coming from some other div than this one and I've tried finding every other div that surrounds the images and adding background: transparent; or background: none; but nothing seems to work.

This is my first post on stackoverflow so I don't know if what I've provided is enough information, please let me know if you need anything else.

Thanks a lot

tumblr css html
2 Answers

You've got:

@media screen and (max-device-width: 568px)
.photo figure img {
    /* background: #fff; */
    width: 100%;
}

Which sets the background color to white for screens narrower than 568px. I removed that in console and it fixed it.

user_147335620

Fixed it like 10 minutes after posting this question -_-

I randomly found another element when inspecting a post

.photo .high-res img {
    width: 100%;
}

Changed it to

.photo .high-res img {
    background: none;
    width: 100%;
}

Somehow this worked?

Thanks a lot to those who answered

user_162640070
Related