I’ve been really struggling with my portfolio projects images. First I added a .thumbnail class to them and they looked great but I wasn’t able to control the size of them. They were too big. Is .thumbnail a fixed height width? Then I just decided to size them myself in a list and center ect. But, when I add the .img-responsive they’re still not responsive when I change screen size to small.
thanks in advance
If you look at the CSS of Bootstrap, these are the relevant parts:
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
}
.img-thumbnail {
display: inline-block;
max-width: 100%;
height: auto;
padding: 4px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: border .2s ease-in-out;
-o-transition: border .2s ease-in-out;
transition: border .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
margin-right: auto;
margin-left: auto;
}
So Bootstrap does tinker with the sizing. If you set your own sizes, that will over-ride it. You might be overriding the img-responsive as well, which makes the size max-width: 100%; height: auto;
You can find this stuff by following the https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css link and word searching the class names.
Hi Joe!
I definitely had my own problems with my images when first working with Bootstrap. The big thing that helps is going through the documentation. Bootstrap’s is really helpful. For example, Bootstrap Components - Thumbnails. I would also strongly suggest taking a detailed read over the containers and grid system it uses (see CSS at the top).
You can’t nest containers and container-fluids without getting really wonky results. But (the awesome thing) you can nest your rows and columns and even offset your columns, which you need to utilize to make your thumbnails look right rather than specifying a width and height (when mobile users won’t have as many pixels to work with). Either that, or you have to set different height/width for smaller screens, which is a bit more complex.
You also don’t need to put the col size for each size screen unless you’re giving different numbers to them (like having something take up 3 cols on med screens, 6 cols on small/tablets and 12 cols on xs/phones). Giving those variances between devices when appropriate can really help your content look right on all devices.
Once you get that grid system down, layouts become much easier. You can kind of draw them out at first if it helps.
Thanks man!! You are awesome for checking my thing out. I’ve just joined treehouse so I’m learning how to do all this positioning business with pure css. It’s super fun.
Thanks so much! I’ve found that this positioning stuff is really the hardest part for me. All my focus is set on that right now. I’m actually downloading html/css templates right now and just copying/modifying them. It helps big time. Writing all the html then adding the css, element by element, watching what each rule/declaration is doing to the page.