This is pretty quick. We just need to add in two media-queries. Let's go ahead and start with the recentPosts. So I'm going to head into recentPosts.scss, and with the recent-posts__posts tag we have grid-template-columns: 1fr 1fr 1fr.

Now I forgot what fr stands for, but I always just read it as for real. We can Google it real quick, so fr unit css. So it means fractional unit. Anyway, let's get back to the app. What we need to do is add in some media-queries like you see here on my screen.

This is just a reference that I found just barely, and basically, the idea is you put in specific values of the screen. Then if it fits the condition, it will apply these styles. So let's write our own.

In recent-posts__posts we want to only apply this when it is when it satisfies a specific condition. Let's comment out the template-columns and see what happens. Okay, so without the template-columns it's kind of centered there in the bottom.

Now if we close the app like this to the side, you can see it's kind of where we want it to be. So the first thing we want to do is basically make a media-query that will allow us to only apply a grid-template-columns if the screen is large enough.

Lets go ahead and add in this media-query. We want to say:

recentPosts.scss

    .recent-posts__posts {
        display: grid;
        justify-content: space-evenly;

        @media screen and (min-width: 700px) {
            grid-template-columns: 1fr 1fr 1fr;
        } 
        grid-gap: 42px;
    } 

Let's save it, and see what we're left with. Let's try opening it. It looks like nothing's happening. What I want to do is just get rid of justify-content: space-evenly. Let's save that, and let's try it again.

Sweet. You'll notice that when we close it it gets small, and when we open it it gets big. The next media-query I want to add is for the search bar. Let's just clean this up real quick.

recentPosts.scss

    .recent-posts__posts {
        display: grid;
        grid-gap: 42px;
        @media screen and (min-width: 700px) {
            grid-template-columns: 1fr 1fr 1fr;
        } 
    } 

Let's head to searchBar.scss, and add in this media-query. It's on the home tag, so we want to be on search-bar__home and we want it on the input of course. We want to write a similar media-query, but a little bit different. Let's just copy it and make the changes.

I'm going to head over to recentPosts.scss. Copy this media query, go to a searchBar.scss and paste it in. What I want to do here is change min to max, and change 700 to 600px and we don't want this.

searchBar.scss

.search-bar__home {
    align-content: center;
    justify-items: center;

    input {
        height: 118px;
        font-size: 40px;
        @media screen and (max-width: 600px) {

        } 
    }
}

In here we want to apply some smaller styles, so I wanted to show you two examples. One with max-width and one with mid-width. Basically, we want to say when max-width is 600px we want the font-size to be somewhere around 23px.

Then we want the height to be about half of what it is usually. So 118 divided by 2 which is 59. So we want that to be 59px.

searchBar.scss

.search-bar__home {
    align-content: center;
    justify-items: center;

    input {
        height: 118px;
        font-size: 40px;
        @media screen and (max-width: 600px) {
            font-size: 23px;
            height: 59px;
        } 
    }
}

Let's save that, and go to the browser and let's try activating these media-queries by making the screen small.

Sweet, that looks fantastic. So when we open it large enough, it will expand and when we close it it will close these styles. It will minimize things or make this smaller. The font-size smaller, the height smaller, and will move these over here.

That's it for this guide. Let's just commit our code real quick and then push up to Github and Heroku. I'm going to open up my terminal, and I'm going to say git status, git add ., and let's say git commit -m "added media queries to the home screen component".

Now I'm going to say git push origin master and I'm going to wait for that to complete. Then I'm going to git push heroku master. This should be up on Github, and on our Heroku app. So go ahead and wait for that to push up. Okay, so the push is completed.

Let's go ahead and test out in the browser. I'm just going to command-click on this link right here, and it's going to open it up. Let's test it out.

Sweet. Our media-queries are in the browser and up on our Heroku hosted app. That's all we want to do in this guide, and I will catch you in the next guide where we will do whatever we need to do. I'll see you then.

Resources

• Source Code