I’m totally at loss right now. I hope someone can help me with this problem.
I am currently working on the first FCC Project “Tribute Page”. Here’s the link
As you can see the Caption below overlaps the image when viewing it on large screens.
http://i.imgur.com/7zzJMb7.png
But when as the Browser screen get smaller, the image and captions aligned perfectly.
Basically, I want to achieve the same output when viewing it on larger screens. I’m new to web development and I’ll still familiarizing myself with Bootstrap.
I hope you guys understand what I’m trying to accomplish.
http://i.imgur.com/nP0V4Pv.png
But when as the Browser screen get smaller, the image and captions aligned perfectly. How can I set this on my code?
There are probably some other solutions, but I solved it by adding a
.thumbnail {
max-width: 400px; (or whatever you find appropriate)
}
to your css.
and a center-block class to your thumbnail div and an img-responsive class to your img.
essentially, your thumbnail div is filling the available space, and the caption is in the thumbnail along with the picture, so they don’t appear aligned until the thumbnail is squeezed to the available space being as small as the picture. so I just shrunk the width of the thumbnail div, and told it to stay in the middle of the viewport. and then told the image to resize responsively to the size of the viewport.
2 Likes
another way to shrink the thumbnail div width in just Bootstrap would be to add some dummy columns around it. something like this:
row
+col-sm-4 (empty)+ +col-sm-4 (your thumbnail)+ +col-sm-4 (empty)+
1 Like
I’m going to try this right now. Thanks!
1 Like
