Search code examples
htmlcsstumblr

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


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


Solution

  • 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