Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Making custom thumbnail images scale for mobile

Home Forums Support Making custom thumbnail images scale for mobile

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #139819
    Jennifer Kanne

    Hey, pretty much what’s on the box. I’m currently using the Simple Image Sizes plugin to make custom image sizes for my portfolio page since I don’t want to deal with having to reenter the code on the functions.php page (as was my understanding from reading WordPress documentation).

    As you can see I have a Windows phone, so maybe it’s just something unique to that — it looks fine on my android tablet, but that’s a tablet, not a phone — however all the default sized thumbnails/images scale properly on the phone, but not the two custom ones, as you can see below. The 400px wide one is pretty much what I made all my larger portfolio page images to be now, so I’d kind of prefer if it worked so it didn’t look awful on my phone, haha.

    http://i.imgur.com/8kSxi8A.png
    http://i.imgur.com/HDHY40y.png

    I’m at least assuming since it is dealing with the responsive aspect it would be something that’d be theme related? I could be totally wrong though, who knows. Anyhoo, how would I go about fixing it? I’m afraid it’s going to be something completely obvious too, but I haven’t poked around at the code that much to know where to look.

    #139826
    Tom
    Lead Developer
    Lead Developer

    Any chance you can link me to your site? By default, those images should be responsive, so something is stopping that from happening.

    Let me know 🙂

    #139827
    Jennifer Kanne
    #139829
    Tom
    Lead Developer
    Lead Developer

    Hmm, it looks great on my phone – using an Android.

    What browser are you using in your phone?

    #139832
    Jennifer Kanne

    Default Windows phone browser, so IE for Windows phone 8.1. If it had been all the images I’d think it was just the browser being 100% awful, but since it seems to only be the custom sized ones, that seems so weird.

    #139895
    Tom
    Lead Developer
    Lead Developer

    What happens when you use Chrome on your phone?

    #139906
    Jennifer Kanne

    There is no Chrome for Windows Phone, unfortunately.

    I realized this morning that I hadn’t tested without the display:inline-block css on the divs. I finally tested it, and it that seems to be the issue. With just the image it scales, so I guess it’s my additional CSS just not being supported, even though I’m pretty sure when I was googling around about it, it reads as if it should be. So I have no idea. Some weird interaction I’m sure.

    Do you know of any IE-related css hacks or something that would get that functionality working for it? Or should I just go back to the old school answer of using floats or something?

    #139977
    Tom
    Lead Developer
    Lead Developer

    You might need to do this:

    Instead of just display:inline-block;

    Try: display:inline-block;*display: inline;*zoom: 1;

    It’s an old IE hack for when IE is having trouble with inline-block.

    May work 🙂

    #140105
    Jennifer Kanne

    No dice. 🙁 Would using flexboxes instead provide the same visual result as I’m getting with the inline-block stuff? Skimming info about them, it reads as though it would, so I may try that instead later today.

    #140138
    Tom
    Lead Developer
    Lead Developer

    Try adding this CSS:

    @media (max-width: 768px) {
        .pt400 {
            display: block;
        }
    }
    #140248
    Jennifer Kanne

    That worked, huzzah! 😀 Thank you! Do you have a link where I could read more about that particular bit of CSS usage or why it works or whatnot?

    #140279
    Tom
    Lead Developer
    Lead Developer

    Basically, I used a media query to apply the CSS only to below a certain screen size (mobile).

    Then I set it as a block element, as inline-block is no longer needed on mobile.

    You can read more on media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.