responsive Images in side bar

[newedgemarketing]

I have some images in my blog sidebar they are calls-to-action that look fine in desktop and mobile portrait but they're too small ad do't span full width in ipad or mobile when viewed in landscape. See Image Attached.

Anyone know how i can fix this? Can I use any css or do i simply have to upload larger images?

http://www.newedgemarketing.com.au/wp-content/uploads/2015/02/responsive.png

http://www.newedgemarketing.com.au/wp-content/uploads/2015/02/responsive.png

[Porter]

To the best of my knowledge, you need to upload an image that is large enough for your largest case scenario. I too am currently struggling with some design issues related to this, and cannot wait for WordPress core to have support for proper responsive images.

If you feel like tinkering with it, there's talk about Picturefill making it's way into WordPress in the future, though I don't know much about it.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[newedgemarketing]

Thanks Porter, I find the whole responsive thing a bit of a mystery not being a developer. And I'm conscious of not adding too many large heavy images to my site which already has a few.

I hadn't heard of picturefill but looks good!

[Porter]

My biggest advice is to go into your dashboard, and then to Settings > Media. Here, you can adjust the various sizes that WordPress will create when you upload an image. You can then figure out what sizes work best for your site, and perhaps tweaking the dimensions of "Medium" or "Large" can benefit you (the smaller you CAN go, the better). There's a great plugin called Regenerate Thumnails, which will recreate all of your already uploaded images in the new sizes. I believe you'll have to manually delete the old images if you want to clean up a bit.

All in all, right now, use the smallest sizes you can get away with for the automated sizes (thumbnail, medium, large), and use the largest size needed for any given scenario. Images will auto scale down, but not up, so that's all there is to it at the moment. The idea behind true responsive images is that you can specify the smallest image needed for one layout (desktop), and if larger images are needed in a different scenario, it will actually load a different image (think "large", or "full"). Picturefill aims to do that, though I've yet to use is, and would prefer something this "core" to be in the main WordPress installation, rather than thrown in via plugin - not that there's anything wrong with the plugin approach, that's just a personal preference.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Author]

Posts