CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
katgarcia
katgarcia

Reputation: 173

Bootstrap 3 - Grid not aligning properly

I'm creating my portfolio site on Bootstrap 4. I've implemented a sliding javascript caption (tweaked from a source online) to overlay the thumbnail images. That all works fine (except for the caption box extending too far out..), but when I started using that, the left edge of where my thumbnails start has moved to the right and I can't figure out what's causing the problem. I've been trying to figure it out for hours.. whatever's causing it is not caused by my custom CSS, because I tried removing it all and it was still weirdly aligned there.

Another thing that I'm trying to do is have the thumbnails tiled up right up against each other, but I can't figure out how to get rid of their margins/padding...

Here's a link to make it easier to check it out. Thanks so much in advance, it would really mean a lot to me if I could get this to work.

SO sorry for the messy code, I'm going to clean it up once I get this stuff working.

EDIT: I don't know why, or how.. but the alignment problem was caused by the UL class. I changed it to a div and now it works perfectly.

Upvotes: 0

Views: 582

Answers (1)

vishalkin
vishalkin

Reputation: 1235

Look at your code. You have defined width twice. use width:97%;

#hover-img .caption-btm {
background: rgba(4, 186, 183, 0.6);
width: 70%;   ********
height: 60px;
position: absolute;
bottom: 4px;
color: #fff;
display: none;
width: 100%;    ********
}

Upvotes: 1

Related Questions