Archived topic
Making custom thumbnail images scale for mobile
11 replies · Started by Jennifer Kanne on September 25, 2015
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.
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 :)
Here ya go: http://blog.onyxserpent.com/portfolio/
Hmm, it looks great on my phone - using an Android.
What browser are you using in your phone?
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.
What happens when you use Chrome on your phone?
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?
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 :)
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.
Try adding this CSS:
@media (max-width: 768px) {
.pt400 {
display: block;
}
}That worked, huzzah! :D 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?
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