• Resolved ellyhails

    (@ellyhails)


    Hi there

    I am trying to reduce the spaces between my image widgets on my blog (www.caribbeanlivingblog.com).

    Previously they were fine as I had this in the CSS (for each image):
    #widget_sp_image-16 {
    margin-bottom: 3px;
    margin-top: 0px;
    }

    But I just had to reinstall all my plugins as my site crashed, and now this code does not seem to be working (I’ve updated all the image numbers already).

    I can see using firebug that there is some code like:
    #jetpack-image-container

    And have tried playing around with this, but it’s not working unfortunately.

    Any help would be really appreciated, thank you!! My site is live as I had already sorted this out previously, so I need to get this sorted ASAP as it’s looks a little embarrassing right now…

    Thanks!
    Elly

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Spacing is coming from a margin-bottom:

    .widget {
        font-size: 85%;
        margin-bottom: 30px;
        margin-top: 0;
    }

    Thread Starter ellyhails

    (@ellyhails)

    Hi Andrew – thanks so much for the quick reply, I really appreciate it.

    Oh yes, I put that in there to make more space between all the regular widgets, and then I counteracted it and reduced the space between the image widgets with the code I noted above (the #widget_sp_image-16 one).

    Do you know if there is a way to alter the spacing on a single widget basis, like I did previously? I don’t understand why the code has stopped working, as I was using the same image widget before.

    Thanks once again
    Elly

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The images widgets have this class:

    widget_image

    So you can maybe write a new style that applies a smaller margin bottom for those widgets, e.g.:

    .widget_image {
        margin-bottom: 15px;
    }

    Thread Starter ellyhails

    (@ellyhails)

    Fantastic, thanks – that has fixed the images that are in a column. Is there also a way to specify the spacing for a particular widget though?

    There are two widgets (one of the right hand sidebar and one on the left hand sidebar) which are placed too close to the ones above them now because the ones above are image widgets so the spacing has been reduced by the coding .widget_image, if you see what I mean?

    Thanks again.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Yep as you can see in Firebug there are unique IDs applied to each widget, e.g.:

    image-21
    image-20

    Thread Starter ellyhails

    (@ellyhails)

    Yep I’ve figured out which image is which number, but I can’t work out what the exact code would be for them.

    Previously it was:
    #widget_sp_image-16 {

    But this is not working now frustratingly.

    Any ideas on what I would need to add to the ‘image-16’ to tweak it?

    Thanks so much, really appreciate your help!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    E.g.

    #image-21 {
        margin-bottom: 10px;
    }

    Thread Starter ellyhails

    (@ellyhails)

    Aaaah I thought I had tried that and it had not worked. Sorry, was being dumb, thought I needed to add something else to it. But that has worked perfectly!

    Thanks very much Andrew!

    Andrew, thanks so much for helping out! Awesome to see you were able to get ellyhails pointed in the right direction.

    I’m Rob from Modern Tribe, the team behind one of the plugins included in this thread (Image Widget). We really appreciate you jumping in here. Any chance I could reach out to you via email? Wanted to follow-up a bit on some of your feedback above…if you’re open to it, feel free to shoot me an email to rob (@) tri.be or let me know an address at which I could reach you.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Reduce space between image widgets’ is closed to new replies.