If you look at your theme right now, you'll see that when you resize your window, your sidebar is nice and responsive. When there's room for it, it appears on the right-hand side, and when there is no room for it, it drops down below the content and displays in the same width as the content, and it's fully responsive, regardless of what size of screen you're using. But if you scroll down to the footer, you'll see the situation is a little bit different because, in the footer, we wanted to stack all our items next to one another so that we fill out the whole space. And you'll remember previously we set a fixed width to each of our footer widgets.
And Masonry is commonly used on sites that have indexes, so you'll see it on a site like Pinterest, and it's a very popular way of doing layouts, but I just want to use it in my footer to handle the widgets specifically. The great thing is Masonry actually comes with WordPress. So all we have to do is tell WordPress, hey, we want to use Masonry, and then tell Masonry what we want it to do. So to start off, we have to figure out what we're targeting. So I'll go to the sidebarfooter.php template, and here we see we have the footer, and here you see we have our dynamic sidebar, and the sidebar is wrapped inside a div with the ID for our widgets.
Now I can save Masonry Settings, and then I need to unqueue it in functions.php. So here I'm going to scroll down to my on queue section, which is here, and then I'll go back to my code snippets. And here I've prepared the on queue function for you. So I've copied that out and I'll place it at the bottom here under Skip Link. And looking at the onCue function, you'll see here we have the handle simone-masonry. We point at masonry-settings.js, and then we set the dependency to Masonry, because like I said, Masonry is already in WordPress.
So we're telling WordPress, I want to use Masonry with this function. So now I can save functions.php, which on queues the masonarysettings.js file. And when I now go and reload my page, you'll see this is what it looked like before, lots of empty space. So I'll scroll up here and now when I just reload the page, Masonry kicks in and re-organizes my content. However, this is not the complete solution because this is not all that responsive. I know Masonry is responsive, but it's actually not all that responsive, and I'll show you what I mean.
If I resize my screen now, you'll see as long as there's room, Masonry will kick in and organize my content. So here it looks fine, but then I get to a certain point, my widgets are just in one column, and they look kind of weird because they're kind of small compared to the width of the screen, and when I get further down, they just keep getting smaller and smaller. So what I want to do to make this more responsive is I want to toggle Masonry on and off just like I did with Super Fish in the Main Menu at a certain point.
So first I'm going to find that break point. So I'll go to my developer tools and I'll resize my screen here and I'll figure out roughly where I want my break point to happen. And I'm going to target this area here where our layout changes. So when our layout changes to one column, I want Masonry to turn off and then I want to span the content to be full width so that the footer matches our sidebar widgets. So to do that, we need to change our Masonry settings.
So, instead of this simple function that simply activates Masonry, I have to make a much more complicated function that also takes into consideration the width of the document. So here I'll copy out this longer function, go back to Masonry Settings, and replace the original function with this new one, and all this function does is attracts the width of the document, so it says, the document is bigger than 879 pixels, then run Masonry and then we have the definition for Masonry down here. If, on the other hand, the document is smaller than 879 pixels, then we turn Masonry off by destroying it.
So that way Masonry will only kick in when we want it to and will turn off when we get to a smaller screen. Now I can go back and test that, so I'll reload my page, and then I'll resize it. Scroll down to my footer and I'll resize it and see when I get to that point. So here we have, we're at 920 and masonry's working, and then when I scale down to 879, you see, Masonry stopped working. And now our widgets are jamming to the left-hand side and are no longer being affected by Masonry.
So now that Masonry's not working for those widths below 879 pixels, we also have to add new CSS that affects the widgets to make them full width in those scenarios. So here I have a simple media query just for the footer-widgets to make them responsive when the screen is less than 879 pixels wide, so I'll copy that out and paste it into style.css. Here I'll find style.css and I'll search for footer-widgets. And then I'll paste it at the bottom of the footer widgets, and here you see this media query just says, when the screen has a max width of 879 pixels, then set the footer widgets to 100%, and display, and take away the flow, so they don't keep trying to stack next to one another.
Now, I can go and reload my page a final time. And when I scroll down to the bottom and resize my window, you'll see that when the screen is smaller than 870 pixels. The widgets span across the entire width of the screen. When I span it up so that it's wider than 879 pixels, then Masonry kicks in and manages my widgets. So now we have a fully responsive footer that on wide screens uses Masonry to utilize all the space, and on narrow screens, uses a media query to make sure that the footer widgets display in a nice manner on smaller screens.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Your file was successfully uploaded.