Okay let's go ahead and make our site responsive. Now I'm just going to do a very basic stack of our current layout because I want to move on from the design part of this series. Now Adrian did provide a fully mobile layout but a lot of this stuff would take extra work and like I said I just want to move on to the functionality part of this series. So let's go ahead and do that. Actually before we do that let me do a few quick fixes here. So if there isn't much text here I want this to span the entire height of the card so we can do that using flexbox. So for this section, actually for this one, we can make it a flex container. flex. Let's make it flex-column for the direction and we can justify-between and that should make it span the entire height and it does. Cool. So let's add that. So let me just copy these classes and let's put it in our code. So that would be with full mx-4. So this one right here. Let's paste

it span the entire height and it does. Cool. So let's add that. So let me just copy these classes and let's put it in our code. So that would be with full mx-4. So this one right here. Let's paste it in here. Okay and also I want to add or I want to make this container sticky so when I scroll down it stays on the page. So let's look for that. That should be in the layout app.blade.php. So where is it? Add an Idea. So it's this container right here. This one here I believe. And we can do sticky and say top-8 or something. So there's some padding on top. Okay now it should be position: sticky and it is cool. Okay so let's work on our responsiveness. So like I said I'm just gonna do a basic stack. So let's start with that. So I have another window here and we'll work with this one. So let's start with this menu up here. So as you see it is a flex container and we can just do a basic

just to reset it on desktop just in case. Okay maybe we can go 3 for the space in between. Yeah that looks fine. Okay so let's work on this container here. So that would be back in our app.blade.php. Where is it? So this was the first add an Idea container and the second one should be here. So yeah so on medium and above it should be width: 175 width: 175 but it should be width: full on mobile. Okay and now we can see the chevrons here in our drop downs. Maybe we can give it some padding too. So let's say let's put it here so px-2 maybe and medium and above px-0. So yeah that's good. There's some padding on the left and right now. Okay let's make sure our desktop still works and I screwed something up here.

should do it. Okay so let's fix that right here. So mx auto on mobile but medium margin-right of 5 and medium mx 0. Okay let's save that. So desktop is as it was before and mobile is still good. Okay so now for the cards. Let's get rid of this so where the votes are and we'll add this one here. So there's going to be two on the page and we'll hide it depending on the viewport size. So when we use Livewire we have to make sure to add the function to both of these voting buttons. Okay so let's do that. So let's get rid of this section here on mobile. So that would be one with the border-r. So let's look for that. Where is it? So this one right here and it should be hidden on mobile and medium and above it should be flex or is it even flex? No. So we'll just say block. Okay so let's do that. Let's add that to our code. So the div with

and it should be hidden on mobile and medium and above it should be flex or is it even flex? No. So we'll just say block. Okay so let's do that. Let's add that to our code. So the div with the border-r. border-r. It's not in here it's in index border-r. Okay so let's add that. Let's make sure we didn't screw up our mobile layout. So it's only for this card and I'll paste it in later for the other cards. Okay so our desktop still works and let's move this button and the status. So this three dots button and the status over to its own line here. So there's room for these and then we'll re-add this votes section underneath that. So let's look for that. So this section is flex and we only want it to be justified between on medium and above and we can do the same trick I believe. So flex-col and medium:flex-row. Okay and I guess I don't need this section over here. We can just leave it as justified-between. Yeah that's fine and what about this?

So let's work on this section right here. Okay. So that's going to go. Where's that going to go? Underneath this section here with the status. So let's look for open here. So right underneath this section here. Let's add something here. See if it goes in the right place. Voting stuff. Okay and let's give it margin-top of 4 and medium and above margin-top of 0. And it should be hidden on medium and above. But when it's not medium it is a flex container. So it's a flex-items-center. And let's give it a margin-top of 4. And I already have the margin. So the first flex item will be where the votes are. And the second flex item will be the button. So let's do that. So this will be where the votes are. bg-gray-100. Centered rounded-xl like everything else. I have a forced height of 10 here.

the second flex item will be the button. So let's do that. So this will be where the votes are. bg-gray-100. Centered rounded xl like everything else. I have a forced height of 10 here. px-4 and py-2 is what I have for padding. And padding right of 8. Okay. And this first div is where the actual vote count goes. So text-sm font-bold. And I have leading-none here. And say 12. And this next section is the word votes. So I have text-xxs semi-bold. leading-none again. And text-gray-400. So let's see how that looks. I believe I should have a margin or a negative margin somewhere here too. Sorry negative margin for the button which we haven't worked on yet. So let's do that next. That looks good actually. So next is the button. So button. Actually let me just paste this in. You've seen me do this 100 times already.

So now I'll add the cards here. Okay. So I added a few more cards here and I didn't bother adding the different statuses because we'll make it dynamic in a few episodes. But it's looking pretty good. And on desktop it still looks the same. So let's go ahead and do the same thing on the idea page. So let's go to the idea page on our mobile layout here. And see what we can do. So that's fine. So pretty much the same thing here. Just make it stack. And we'll make these buttons stack. And we'll get rid of this margin and just stack the comments here. So let's go ahead and do that quickly. So for this, I believe for this page, the username is gone now. So this username doesn't show for whatever reason. So let's just do the same thing. Let's make it stack. So show.blade.php. Actually, let's do it in DevTools. So this section. So we'll put the image on its own

show for whatever reason. So let's just do the same thing. Let's make it stack. So show.blade.php. Actually, let's do it in DevTools. So this section. So we'll put the image on its own line. So wherever the flex flex-1 is, we can do the same thing we've been doing. flex-col, medium, flex, row. Okay. And we'll give this image a mx-4. mx-4. Okay. So let's do that. Wherever the flex-1 is here. flex-1. Here flex-col, medium, flex, row, and mx-4. Okay. Next, we want this section here to be on its own line. So let's find that. So it'll be this flex container. And I believe we did medium. And we did the same thing. flex-col, medium, flex, row. Okay. So let's find that. text-query. So it's right here. Same thing. It's this one here. So flex-col, medium, flex, row. This is medium as well.

What's next? Next is, is this fixed? Okay. So we have to give the same treatment. We also have to put a Z index on it as what we have here in the index page. Sorry, did I add a medium on this one? Oh, I already have a medium on this one. So let's remove this one. Okay. And this, we have to give the same treatment. So this would be the menu mark as. So yeah, we just have to grab this and maybe also give it a Z index. So mark as spam. So it's this one, this class, and we can just paste that in. And let's also add a Z10 maybe. Okay. And that's good. Okay. So let's stack these buttons. Actually, if we get rid of the margin, then it should fit. So I'm okay with that. But these containers are too big. So we can make that a bit smaller. So it's these buttons. And there is a margin left of six on them. Let's make that only on desktop.

and may require polishing later on. But I'm pretty happy with what we've done here. So there's the index page. And let's make sure this still looks okay. Okay. And for the idea page, everything looks okay as well. Menu's fine. Menu's fine here too. So yeah, I'm pretty happy with this. Let's go ahead and make a commit as always. What episode is this? Eight. git add. git commit. Episode eight. Make responsive.