More than one image in a widget

[Julie]

Hello,

I have widgets on the right side bar of my blog page which include more than one image. I do this so the images can sit perfectly side by side with a the appropriate division between them. All good. But, when I view on my iPad or iPhone, the images drop down which if fine, but the division between the two images is not there so the images merge together which does not look good.

Is there a way of fixing this?

Each image in the widget is 180 x 180 which when side by side fits perfectly when viewed on a desktop computer

my site is http://www.thebeautyissue.com and I have also inlcuded a screen shot from my iPad

Thanks,

Julie

[Sushil Adhikari]

Unless you recently fixed this, your sidebar images look fine with spacing and no merging.
*I didn’t get any screenshot here.

Also, none of your images that I seen in your blog sidebar are 180×180, unless I missed the images somewhere else?

[Julie]

Attached screen shot again…

It is the heart images there are 4 (two in each widget) and they are all 180 x 180

Yes, they do look fine on desktop but not on iPad or IPhone

Thanks,

[Julie]

Trying to attach again

[Sushil Adhikari]

still no screenshot, but no worries, I now see the images you referred to. This is going to be one of those things where you have to create a custom CSS for the media query when viewed on a mobile device. So on one of the media queries for the smaller viewing size (resolution), you need to get a little creative with adding css to put a bottom margin on the images…it’s going to be a little difficult because you also need to target that particular widget ID so that only those images will take on the custom margin bottom when viewed in a smaller window.

**welcome to mobile design 🙂

the other option is for you to use the inline columns (which is a much easier solution). Use this as a guide:

http://demo.styledthemes.com/encounters/inline-columns/

Use the code for the two columns (span6) and replace the content with your images….one image in each column. Then repeat the code for another row.

[Sushil Adhikari]

By the way…your first image has a broken

tag that shouldn’t be there:

<img src="http://thebeautyissue.com/wp-content/uploads/PurpleQuitSugar-e1399964637341.png" 

[Julie]

Brilliant! Thi inline code fixed it. Thank you 🙂

[Author]

Posts