Need to remove gap in 'hero' image

  • Unknown's avatar
    canadiangiftguide · Member ·

    Basically if you visit my blog: canadiangiftguide.com you’ll see a big hero image at the top for Joe Fresh. At one point I had it so the two yellow bars on top and below the image were right up against it – no white space.

    So I definitely had the code for this at one point, but then noticed it was somewhat missing (i.e. the top had a gap), tried to edit it myself, and now it’s completely not working (i.e. now there are gaps on top and bottom again, argh).

    If someone could give me the CSS to edit this and just get rid of that whitespace padding, I’d be oh so grateful.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    hallluke · Member ·

    Try deleting what you have in your custom CSS and replacing it with this:

    #homepagetop .textbanner {
  margin-bottom:0;
}

#homepagetop {
  padding-bottom:0;
}

#homepagetop .homewidgets .widget-title {
  margin-top:20px;
}

    The first rule sorts out the top spacing, the second rule sees to the bottom spacing and the third one adds a gap to the widget title beside the hero image so it’s not squished up too close to the border above it.

  • Unknown's avatar
    canadiangiftguide · Member ·

    Yes! Thank you, thank you, thank you. It looks perfect now – sincere thanks for your help :)

  • The topic ‘Need to remove gap in 'hero' image’ is closed to new replies.