[frapster]

Femme-fatale - after looking at your site there are two options I'd pursue for eliminating the extra white space in your slider.

The first illustrates the real problem - your image is too narrow for the specified size of your space.

.wrap {
margin: 0 auto;
width: 910px;
}

The above change messes up your layout. So alternatively I'd change the width of your images to 1020px (or whatever best fits your space). I just guestimated the width.

Hope that helps.

[frapster]

EducationPossible - the following should achieve what you want....

.innov8tive #genesis-responsive-slider h2 {
background: none repeat scroll 0 0 #FFFFFF;
height: 53px;
margin: 0 0 35px -10px;
padding: 25px 0 0;
}

You are 1) removing the background image since the burst is part of the 'white bar' 2) making the DIV white (#FFFFFF) which retains the assigned transparency by default and restores the white bar effect without the burst 3) adjusts the height of the DIV which affects the bottom spacing to something close to what it was originally. The key values that you will want to change in the event you'd like to tweak what I've done are:

Background - #FFFFFF to change the color

These two items affect the vertical size of the white bar:
- height: 53px to adjust the bottom half of the white bar
- padding: 25px to adjust the top of the white bar

This item adjusts the space below the white bar:
- margin: 35px to adjust the space below the white bar

Another option would be to not do what I did above but but edit the original graphic with the burst by deleting the burst, adding it to the media and then adjusting the original CSS like so:

.innov8tive #genesis-responsive-slider h2 {
background: url("wp-content/uploads/2013/07/sliderH2.png") no-repeat scroll center center transparent;
}

NOTE: the URL is what you can get from the Media section of your admin panel once you upload the edited file.

There are lots of other ways to do any part of this but my first suggestion is how I'd solve what you're trying to do.

[Author]

Posts