May 14, 2014 at 6:58 am #15136
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
JulieMay 14, 2014 at 7:34 am #19881
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?May 14, 2014 at 7:36 am #19882
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,May 14, 2014 at 7:45 am #19883
Trying to attach againMay 14, 2014 at 8:05 am #19884
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:
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.May 14, 2014 at 8:07 am #19885
By the way…your first image has a broken
tag that shouldn’t be there:May 14, 2014 at 8:24 am #15137
Brilliant! Thi inline code fixed it. Thank you 🙂
- You must be logged in to reply to this topic.