- This topic has 11 replies, 2 voices, and was last updated 5 years, 10 months ago by Tom.
September 25, 2015 at 7:44 pm #139819Jennifer 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.
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.September 25, 2015 at 10:53 pm #139826TomLead DeveloperLead 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 🙂September 25, 2015 at 11:07 pm #139827Jennifer Kanne
Here ya go: http://blog.onyxserpent.com/portfolio/September 25, 2015 at 11:46 pm #139829TomLead DeveloperLead DeveloperSeptember 26, 2015 at 12:00 am #139832Jennifer 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.September 26, 2015 at 9:49 am #139895TomLead DeveloperLead DeveloperSeptember 26, 2015 at 11:38 am #139906Jennifer 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?September 26, 2015 at 10:13 pm #139977TomLead DeveloperLead Developer
You might need to do this:
Instead of just
display:inline-block;*display: inline;*zoom: 1;
It’s an old IE hack for when IE is having trouble with inline-block.
May work 🙂September 27, 2015 at 10:53 am #140105Jennifer 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.September 27, 2015 at 12:51 pm #140138TomLead DeveloperLead DeveloperSeptember 27, 2015 at 10:23 pm #140248Jennifer 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?September 28, 2015 at 12:03 am #140279TomLead DeveloperLead 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
- You must be logged in to reply to this topic.