More than one image in a widget

Home Forums WordPress Themes – Premium Encounters More than one image in a widget

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #15136
    Julie
    Participant

    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

    #19881
    Sushil Adhikari
    Moderator

    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?

    #19882
    Julie
    Participant

    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,

    #19883
    Julie
    Participant

    Trying to attach again

    #19884
    Sushil Adhikari
    Moderator

    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.

    #19885
    Sushil Adhikari
    Moderator

    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" 

    #15137
    Julie
    Participant

    Brilliant! Thi inline code fixed it. Thank you 🙂

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.