Thu, 2014-03-20 15:12
Can't figure out how to style bootstrap carousel so the div has no margin above and below the images. When using firebug, I see the div space for the control buttons, but for the life of me can't style to remove the space above the images. Ultimately, I'd like the space between the carousel images and the footer removed. Your insight is greatly appreciated!
www.rmintegrativemedicine.com/temp
Thanks,
Thu, 2014-03-20 18:52
#1
Well first of all, there
Well first of all, there seems to be some buttons hidden behind your blue background, this is the code I found:
<p> <a class="left carousel-control" data-slide="prev" href="#carousel-example-generic"></a> <br></br> <a class="right carousel-control" data-slide="next" href="#carousel-example-generic"></a> </p>
If you are not going to use these buttons but would like to auto switch images every now and then, then perhaps delete this piece of code, and you caroussel will go lower already
Also above your carrousel is a little paragraph coding without any content:
<p> <!-- row 4 --> </p>
This is also a paragraph line just below your caroussel:
<p> <!-- Controls --> <br></br> <a class="left carousel-control" data-slide="prev" href="#carousel-example-generic"></a> </p>
Anyway, these are the codes that give you this much space between the top and the bottom of your caroussel.
Hope this gives you a good view on how to work on
Fri, 2014-03-21 08:02
#2
Bootstrap: blech
Start by ridding yourself of the empty p elements and the br elements used for spacing.
You also have {top: -20px;} on .carousel which is presumably to counteract something else. I didn't dig too deep, as you're using the steaming pile known a bootstrap with its many idiocies.
The big gap below the merry-go-round seems to be due to the container being declared a larger height than its content. I have no clue why the bootstrap stylesheet declares so many elements to be {display: table;}.
cheers,
gary