Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #5388

    I’ve customized the colors of the Info and Note boxes (with your help, thanks) but now I’d like to eliminate some of the extra space at the top and bottom of the boxes. I’ve examined them with Firebug and can’t seem to narrow down exactly what to change. Here are 2 examples of what I’m seeing with the boxes: http://leapindevelopment.com/services/ & http://leapindevelopment.com/our-team/ . IN both cases there is a very large space that I’d like to make smaller.

    Thanks for your help.

    #49970

    Hey,

    add following code to css/custom.css:

    .avia-box {
    padding: 0 15px;
    }

    This will remove the top/bottom padding. I noticed that some empty paragraph tags are inside the box – maybe switch to html view and delete them because they push down your text too.

    #49971

    I had already edited the custom.css to lessen the padding. When I look at the html for the note box there are no paragraph tags showing. One thing I did try was removing the header styling tags and that did make the box a lot smaller. So maybe I will create a separate style for large text instead of using the h2 and h3 tags. I don’t want to change the line height on those tags as they are working the way I want in other areas of the site.

    If you have any other suggestions they are welcome. Thanks for your help.

    #49972

    You could apply a negative margin top to the h2 headings like:

    .avia-innerbox h2{
    margin-top: -20px;
    }

    The code will only effect headings inside the info box.

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Too much space at top & bottom of Info Box’ is closed to new replies.