[Resolved] Making custom thumbnail images scale for mobile

[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.

[Tom]

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 🙂

[Jennifer Kanne]

Here ya go: http://blog.onyxserpent.com/portfolio/

[Tom]

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

What browser are you using in your phone?

[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.

[Tom]

What happens when you use Chrome on your phone?

[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?

[Tom]

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 🙂

[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.

[Tom]

Try adding this CSS:

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

[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?

[Tom]

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

[Author]

Posts