- Read Tutorial
- Watch Guide Video
In this guide we're going to take care of some little bugs we have with our portfolio image. I also added one more item off screen, which is that we need to update our seed file so that it can take in users and any other parameters that we want for sample data.
Let's go to our portfolio image in our application. You can see under certain conditions our cards look very weird. This is definitely not the behavior we want and it actually even gets worse if you open this up and you trying to access it via a mobile screen. If I click this and shrink it down it actually shrinks the images from side to side. Even our placeholder images here are not scaling down. What I want is kind of the traditional responsive kind of component here where each one of these cards remains and keeps their aspect ratio. Then once it comes down to a smartphone size they'll actually stack on top of each other and when they're here they will be side by side. That is the behavior I want. Let's see how we can implement this. I'm going to open up Sublime Text and the first thing that I want to do is open up our portfolio item partial. This is in the portfolios view file and I'm going to take our image tag and one of the cool things about image tag is that you can actually pass it a width. I can pass it a width and as a string I'm just going to say I want the width of the image tag to be 100%. What this is going to do is it's going to scale down or images but it's going to keep the aspect ratio. Let me come to the site now and hit refresh. As you can see that worked perfectly. That is the first part. That's not everything though.
Let's open this up again and you'll see that our responsive little bug is still there. As I shrink this down it shrinks it down so that all the items are still side by side. I'm assuming this is not what you want. I mean if you do want this then that's perfectly fine. It's your portfolio. You can do whatever you want. I want them to be stacked on top of each other. What I'm going to do now is I'm going to come and I'm going to put these inside of their own div. I'm going to say and wrap this inside of columns. If I give this a class I want this to be col-md-4, hitting refresh. This should work. But when I say it should it works kind of but not exactly. There is a very weird reason for this and it has to deal with the layout that we're using. That is that cards by default are using a 33% width parameter. This would work if we go into our responsive layout here and shrink this down, they stack on top of each other. But the problem is, is that it's always going to only take up 33% of the div that it's inside. They did it for the reason of having it take up 33% so they would always have three items per row. But that's not what we want we're going to use this column class in order to make that possible. Now, all we have to do is go into our portfolio CSS file. If you scroll down you can see the line of code that's causing the issue it's this width one. All we have to do is change this to 100%, come back, hit refresh. Everything is going to work. It's also going to work on smaller screens. If I pull this down you can see that now I'm getting the behavior I want where these items are all stacking on top of each other. It's a very cool little feature provided by bootstrap. I absolutely love the way that their column and grid system works. It makes it very easy and I think very intuitive when it comes to building responsive layouts. Everything there is good.
Let's cross that off the list and say git status. We only changed two files, that's good. I can say git commit -m "Implemented fixes for images and grid for portfolio items", git push origin final-changes. Let's take a look at the next thing that we have to do. We are going to move on to our last layout our application layout and we're going to work on the contact page and the about page. Mainly we're going to be building out a number of different refinements. Our about page and our contact page is fine, but I think that we can do better. I want to do it not only to give a better looking about page but also so you can explore some of the other classes and some of the other cool features available with bootstraps. Such as the collapsible component and the progress bars. We'll cover those in the next few guides.