Always Sunny 04: Testimonials Carousel, Services Carousel, & More Shenanigans

0:00:00
What’s up everybody welcome back it is episode what number four now I think we are going to tackle the sliders for the services and the testimonials in this episode before we dive into everything I do want to quickly update you on some things that I did off camera just to button some things up so here’s my episode for pre notes we’ll go ahead and zoom in and I will disclaimer this episode and just say it is Friday it’s 3 p.m. had a really long day yesterday it’s already been a long day today I’m I’m exhausted I want to finish this slider stuff and get it out of the way because basically aside from the gallery which I think we’ll be able to whip up very easily in WP grid builder the home page is done and I can like start to actually get the right content in there and submit it to the client for review so that we can get the green light to move forwards on the rest of the website that’s really what I’m wanting to achieve so normally I would just if I was it was a Friday and I was feeling rundown and low on energy like I am today I would just I would just take the day off but you guys are waiting on this next episode the client is waiting on getting to be able to see this live so you can just approve it so we can move on I just want to knock it out I want to try to knock it out and I think we’re going to be able to knock out the sliders with bricks is slider is like the nestable slider component I’m not 100% positive but I was playing around with some things earlier just to see hey maybe will this work and I think it might work so we’re going to give it a shot pre notes for this episode I removed the scrolling header so if you go to the home page remember on the home page when you scroll me zoom out a little bit when you scroll down the header disappears right so there’s the header it disappears when you scroll down we wanted that when you scroll back up in bricks it makes the header come back but I didn’t want that to happen so what I did is I noticed that if you inspect this we can zoom in again so here’s the header right here watch this it’s got a class of sticky on it bricks assigns the class of sticky to make it an overlay header when you scroll down it dynamically adds another class called scrolling and so what I did is I went in and I basically said which also applies when it’s going back up again and so I was like if the header and let me zoom in here if the header is sticky and it’s scrolling then translate it on the y-axis minus 100% which basically means hide it get rid of it so that’s what I put in as a little snippet to get rid of that if you guys are trying to do that on your side as well the next thing I did is I switched the accent heading from a shadow technique you saw that when I initially built that little accent heading thing we use the shadow technique I switched it to a real text stroke now so if we go down you can see right here the WebKit text stroke with and WebKit text stroke color and I just think that’s going to be an overall better technique and it also makes it easier to make this show up better on what you can’t see in the builder at all but if I zoom out and come down here you’re going to be able to see it right there in the background I’ll zoom in very faint and very light and then of course it works on the white background as well so we’ve got that working on both colors what I had to do here to make this show up because you remember in the last episode it was hidden we couldn’t see it basically it was a zindex issue now you don’t have to use zindex I use the index minus one to put that behind this text right here and it was also going behind the background color so zindex and CSS is very weird sometimes every element on a page has a zindex of auto by default which supposedly converts to zero or is equivalent to zero but it’s not really it’s not true they’re lying to you it’s a conspiracy so what actually happens is if you put something negative one and the other the index of the section is auto it’ll actually go behind the section and this is I’m going to explain this and it’s still not going to make any sense so don’t worry about it if you’re confused join the club so this is minus one it goes behind the section if the section is set to auto and auto is supposed to basically be the equivalent of zero which would make sense because minus one is less than zero okay you follow me right minus one is let we all agree on this minus one is less than zero so it should go behind a zero element I get that perfectly fun so but the problem is we need to use minus one because this is zero to we don’t want to have to elevate this up and then put this back at one or whatever but here’s the really confusing part all you have to do to fix this and make it not go behind the background is to put a zindex of zero on the section so if this is explicitly set to zero the negative one will no longer go behind it even though it was auto before was supposedly is equivalent of zero it makes no sense but it works so the problem is in CSS there’s no parent selector so we can’t automatically apply this technique you can’t say if a section well you can in the future you can use that new has selector that we’ve all seen unfortunately only has 12% browser support but you can’t say like you can’t put this class and say now target the parent of wherever this class exists and set it to the index to zero you can’t do that so we have to manually you see here if I select this section I put a automatic CSS Z zero class on it and that’s it like I’ll remove it and hit save I’m just going to prove to you this is literally the only thing you have to do to make it work look it’s gone okay now I’m going to come back as long as this is explicitly set to zero this entire section now we refresh and we have our accent text okay I get it it makes no sense but it is what it is and we’re going to move on okay so next thing in our notes setting a set accent heading to always be secondary color I have it at white because if you notice in the Figma sometimes it’s white sometimes it’s yellow the secondary color but here’s the thing more often than not it’s yellow and I actually made an executive decision I said hey even in the hero section we should make it yellow there too which if we zoom out and go up there it is like it looks fine it’s fine so let’s just make it secondary across the board and we don’t have to fiddle with it we don’t have to put extra classes on it let’s make an executive decision and we’re rolling forward with that made the H2 headings a little bit bigger I just used an ACSS manual override in the dashboard I said hey I want my H2s to be this size at the max done boom bam moving on with life okay added slight text shadow to accent heading so it doesn’t blend with the accent heading so this text right here on white because there’s a little bit light gray behind it and it’s a bit kind of abstract it was a little bit a little bit hard to read so I just put a very slight text shadow on that text nothing major nothing serious all right what else did we do made a few tweaks to the header for mobile is still not done is still not ready for mobile but at least it’s a lot better and then I just put in the services CPT so if we look in post types I made a testimonial custom post type I made a service custom post type and I’ve just gone in and because you guys don’t want to watch this boring stuff of me just writing in the names of their services and then filling out the custom fields so I scroll down I made a service card heading a service card description a service card image field so we’re going to be able to dynamically inject those into the slider that we’re about to create and then on testimonials I did a couple of things on testimonials if I can get back out here okay so on testimonials I put in a few testimonials from Google I just pulled these in manually and if you look on here I have the testimonial If you look on here, I have the testimonial city and state code put in as custom fields.

0:08:19
I’m using the Gutenberg body text as the actual review text and I am using the title field as the person’s name. And then I also created a custom over here on the right if you check this out. Let me check our recording real quick. Just make sure we’re good to go. Okay, we are. Sometimes my recording is off and I have to ditch like 15 minutes of recording. So categories. I added a custom textonomy called testimonial categories and this is going to allow us to categorize our testimonials which makes it a little bit easy to query them. Remember, we want, for example, on the window tinting page to just show window tinting testimonials. So if you have them categorized, it’s going to make that very easy. Okay, so that is the update and now what I want to do is dive into the actual work. And you know, I hope my brain is working well enough to be able to do this. I might be a little slower and dumber than usual. It’s just how I’m feeling today. I’ll be upfront and honest with you. But we’ll see if we can get this done. So what I want to do is we look at our Figma. I need two different types of little carousels here. This one is a dual card carousel. So we have two cards at a time. We have the arrows off to the left hand side. I’ve no idea how this is going to come together yet. And then on this one, which is a little bit tougher, a little bit trickier, we have three to four, maybe four, four and a half, five cards at a time. And they go off the edge of the screen. And then we have the two double arrow navigation down below. And again, I have no idea if this is going to work. This is not you know, this is not my wheelhouse. We’re working in, this is the first website I’ve ever built in bricks. I’ve never used the slider in bricks before. I’m coming from oxygen lands. And so we’re just going to do our best. And we’re going to see what we’re able to make happen. So the first thing I’m going to do is I’m going to add a container in here down below. This is going to be kind of our slider container playground here. Oh, one thing I do want to do. I want to, I want to install the new version of automatic CSS. So give me a second here. One sec.

0:10:32
Get these out of the way. Okay. All right. That’s good. Okay. Let’s go to plugins add new. Upload plugin. Because there’s something I want to test out here while while we’re here. Where are we files? All right. This here we go. Let’s toss this in here. And come on now. This is going to give us access to 12 should give us access to 12 column grid, which may come in very handy because what I was noticing is right here, this is a very kind of narrow first column. And then we’ve got our other two columns here. So I was thinking about using trying to use that 12 column grid there. Now that we have more flexibility with our 12 column grid. All right. Did this install properly? It did. Do we get a good save? We get a clean save? All right. I think we’re good to go. Should I sneak peek this a little bit? Sneak peek it? Sneak peek it? Oh, oh, oh, okay. All right. That’s enough of that. Just a little sneak peek. What’s coming, my friends? All right. So let’s go to back to here. So I’m going to save and refresh. All right. What do we got going on here? So let’s try a little 12 column grid out here. So if we did 10 columns and like an 8 and a 2, I wonder how narrow this first column would be. So let’s do grid 10. And let’s do what we would do now is add blocks. Okay. Block.

0:12:14
And there’s, ooh, that’s, that’s, well, I’m not done yet. Let’s. All right. There we go. So if I span this two, call span, if I can spell things correctly, it would be more helpful. That actually, it looks like it’s going to be almost a perfect width. So this one’s going to call span 8. There we go. So this is right here. It’s going to house our carousel. This, well, oh gosh. Now see, now I’m thinking about this. I’m used to having like a facet that I can stick wherever I want it. And the reality is that I can’t put any, I don’t think I have control of these arrows. Like I can’t like physically put them in a container over here. So this may be, this may be a node, this may be, this grid thing that we’re trying out is probably a no go. All right. Scratch that. But there’s, there’s some other things that are going to come in handy. Okay. So, huh, we’re already working backwards. Okay. Container. Let’s, let’s start by just getting a slider in there. How about that? So let’s get a slider nestable. And we’re going to look over here. Let’s collapse this. I don’t like having the whole DOM tree open all the time. I just want to look at this thing right here. This is all I want to see with my brain and my eyes. Slider nestable. We’re going to go test the monials. Slider. Okay. And I don’t have anything set. Let’s look at what is pagination. No, no, no, we don’t want any pagination.

0:13:56
Let’s get that turned off. I see, I don’t know if there’s anything set at the ID level on this by default. Oh, there is. Look at this. We got a background color. Let’s get rid of that. I don’t want any background colors. Let’s go back to my class. I think we can do stuff at the class level. Remember in oxygen, like you put a class on a component and you’d end up doing stuff and it doesn’t do anything at the class level. It only does stuff at the ID level. I don’t know if that’s going to happen to us here. But we’re going to find out. So it puts three slides in here by default. And I think that’s all right because I just want to see what’s going on. We’re eventually going to bring this testimonial card in. So I’m going to go to options and see what we’re working with. So we’ve got a default or custom. This is not what we want. Type loop slide. So I okay, I imagine that this will just infinitely loop it versus just sliding it back and forth. I don’t know. I think left to right fine. I don’t know what keyboard does. I’m going to have to read documentation. I don’t know what we’re going to do with our height yet. I would imagine that we just do auto height down here because our cards really need to just be the they need to determine the height. We’re going to kind of put a I don’t know how that’s going to work yet. All right, spacing. I assume this is a gap like spacing between the cards. Let’s put a variable in here. Space s. Okay, our start index is zero. Don’t know what that means. Items to show.

0:15:32
Well, we want two of them. That’s what we see in our Figma. Okay, well, we got two cards. That’s a good start. Items to scroll. I believe this I guess this is like how many items at a time. So I’m going to set that to one. Start index I guess can be zero. Rewind slide. I don’t think I want to do anything with the actual slides because our cards are going to are going to do the work. Arrows. Here we go. All right, I do want to show the arrows for sure. All right, now I get a previous in the next. Well, let’s just go ahead and grab these then. So solid. Let’s do previous I guess would go to the left and next would go to the right. So let’s put a right bracket in there. Okay, all right, I see I see I see arrows. Okay, I see slides. Now now I let’s just look at the front end. Okay, one, two, three. Okay, that’s working. It’s working. We’re getting somewhere. So now what I want to see is just I want to see my testimonial cards in there. So let’s get rid of that. Get rid of that. Get rid of that. Let’s grab a testimonial card and drop it into our slider and see what happens. Let’s owl space these out because right now they’re running into each other. Okay, I don’t know why it’s so tall. Why is it so tall? I’m going to come in here. I want to make sure. Okay. All right. I guess it’s that height 50. Oh, yeah. Okay, definitely don’t want that to be happening. So home slider nestable. Maybe it’s this height right here. Even though it appears to not be said, it’s telling me that maybe there’s a 50 VH on that. I don’t want it to be zero. I just want to be auto.

0:17:40
That that is looking a lot more like what I want. Okay, so refresh. Yes. Okay. Guys, we’re making progress. We’re still not anywhere near where we need to be, but we are making progress. Yes. What I want to do now is loop this card and get our dynamic data inserted. So we’re going to go query loop. I’m going to do this on the class just in case. I don’t think any of this matters. We want to go from testimonials. We want to go post per page. What do you guys think? Nine. They can loop through like nine testimonials. How about ten? Let’s do ten. I don’t even have, I don’t have anywhere near ten in there right now, but eventually we’ll have more than ten. And so it’ll probably loop through ten. Yeah, yeah, yeah, yeah, yeah, I don’t think we need to do anything else. So let’s save. Now let’s, I don’t know what’s going on with this. Because I asked for two cards and I’m getting two and a half cards. Don’t I don’t know what’s going on with that. But I think what we can do now is safely put in our dynamic data. So this is going to be the post title. This is going to be, so before the comma, we’re going to want to inject our city. And then after the comma, we’re going to want to inject our state code. All right. And then for here, we want to just inject the post content. Post content. Where are you? Okay, post content. And oh, all right. That’s going to be a lot too. Because some of these are very long, but I have a trick. I have a trick that I learned in bricks. But first thing we need to do is when these are not the same length, I want these testimonial stars to be at the bottom.

0:19:39
So I’m going to grab the stars wrapper and we’re going to go margin top of auto. And at least that way our stars should always be in alignment. There we go. Even if the cards are not exactly the same height. But what I’m going to do is we’re going to limit this text right here. And the way that we do this, I learned this the other day doing something else in bricks. And it’s amazing. And it’s one of those Easter eggs where it’s like, I feel so spoiled. I could never do this in oxygen. And in bricks, it’s so easy. Watch this. Watch how easy this is. So I want to limit these cards to a certain amount of words. And I don’t know exactly what the word count is, but I’m going to guess. We’re going to do like 40. Okay. All you do is put a colon and the number 40. And watch what happens on the front end. It limits it to 40 words. And then I can also just put like a dot dot dot after. And that’s going to give us our lips. It kind of lets people know, hey, this is cut off. But check that out. Like how easy is that? It’s just absolutely spoiled. Absolutely spoiled. Okay. And I think we’re not going to have any issue with card heights now because we’re limiting the text or state codes not being pulled in. Um, state code. Why not? Is it because of the comma? Is that the comma mess with stuff? Let’s go and refresh. Oh, all right. We have a maybe, maybe they can’t be in the same. Surely they can be in the same thing, right? Yeah. No, they can’t be. Let’s put in the state code by itself.

0:21:34
Can we not use two short codes in the same text element? No, it’s just the state codes not working. And I have no idea why. Services, testimonials, Kevin Costs, look, look, look. There’s about. Oh, no, there’s not. FL. I didn’t put any values in. I put a placeholder in when I set up the thing and then when I put in the actual testimonials, I didn’t actually put any data in the field. Okay. So that’s that. That’s FL. This is FL. Okay. Now we should be good. Okay. I made the changes. Don’t warn me about leaving. Like, when I’ve already saved the changes. Thank you. Okay. Refresh. Refresh. Did I not save in the builder? There it is. FL. Okay. Scroll. Scroll down. Here we go. So now I’m going to hit the dynamic data. We’re going to put the city back in. Then I can comma after the city. And now we should be good to go. There it is. You can see it right there in the preview. That’s the other thing I like is the loop builder in bricks automatically updates. You don’t have to hit an update button or anything like that when you’re doing these types of components. Okay. So I’ve got basically guys what I want on the front end. Now I don’t particularly care that it’s cutting off half a card. It’s letting people know, hey, there’s more this way. If you want to scroll. But the design doesn’t call for that. And I may tweak this a little bit and see if we can fix it. But if not, it’s one of those things where I’m just like, I don’t care.

0:23:28
It’s something we can, if the client says something about it later, we can try to figure it out. But it’s not something I’m going to let up, let hold up the build of the website. Okay. So I do want to deal with these arrows though. And I do want to deal with the fact that our container, our slider, what we can probably do is just limit the width of the slider in general. So this testimonial slider, I actually want to make another class for limiting the width of it. Like, so testimonials slider, double dash, narrow. So this is a modifier class. Because I want to be able to use testimonial slider elsewhere. And maybe I don’t want it limited when I use it elsewhere. I don’t really know yet. But it seems like that would be plausible. So I only want to narrow it when the narrow class is on there. So I’m going to do width of 90% Okay. And then margin left of auto. Boom. Okay. Now what I need to do is we look at this on the, I’m confident in deleting this thing now too. So now all we have is our slider. We’re not going to lose our cards. Okay. Now we’re offset enough room for our arrows, I believe. Now we just got to figure out how to position our arrows. So on our testimonial slider, content arrows, let’s see what we’ve got. So it looks like, let’s see if I do zero on top. Oh, it did move that one. It moved that one. I have no idea how I’m going to, they need to be grouped together because look at the Figma, they’re together, right? It would make sense if they were in their own container.

0:25:28
So I don’t know if I’m going to use these controls. What we probably want to do here is just inspect our structure. So on the front end, I’m going to inspect. All right. So this uses buttons, which is good because that means that this is accessible or trending towards accessible. And it’s got ARIA controls on there already. I mean, this is, I’m pretty impressed, bricks. I’m pretty impressed. Dives button, button. They are grouped together. Look at this right here. It’s called splied arrows. All right. So they’re in a group called splied arrows. So I think, and then this is display block. What if you display, oh, we’ve got kids and neighbors over. It’s craziness downstairs. So if you hear kids screaming, nobody’s being harmed or anything like that, it’s, it is just kids being wild. Flex important. All right. This doesn’t seem to be doing anything. It was set to block important. Position. It has no position on it that I can see. So I think what I’m going to do is just absolutely position splied arrows. And that, because they’re already grouped together, I just need them to act better. I just need them to behave. So we don’t need this. Testimonial card slider. I’m going to target splied arrows. And let me zoom in for you guys. So splied arrows is going to be position absolute. And we’re going to look, oh, look at that. They jumped. Okay. Oh, wait a minute. Why are they backwards?

0:27:16
Hold on. They just reversed position. Look at this. Left is on the left. Right is on the right. When I position them absolute, right is on the left and left is on the right. I thought it was just me that was dyslexic. Okay. All right. The right still goes to the right and the left still goes to the left. Is it this class right here? No. What’s what’s swap them? Because if you look at the DOM 2, arrow previous comes first. And arrow next comes second. So why did they swap positions? Okay. Just by content center, that’s fine. Okay. I’m seeing nothing that would suggest that these should have swapped places. Position absolute. Okay. So let’s try this. Splied arrows. I’m going to target the second child order minus one. So can we send the second child to the beginning of the DOM? No. We cannot. Why button button this button? See if that button was, come on now. It doesn’t matter that they’re swapped. Man. All right. I’m confused. I’m going to need a phone a friend on this one. Let’s refresh. What did you guys see that? Swapping the DOM order does nothing. So if I take this one, which is second, but showing up first, then I’m like, hey, put it put that first. It doesn’t do anything. Arrow next previous. Previous next. And the arrows are not changing. And I can’t switch their order with CSS. I don’t know what’s going on here. Okay. But let’s see what we need to do next. Geez Louise. So we need to take splied arrows and go top zero left zero. Let’s just see what happens with that.

0:30:36
Okay. That’s what I expected. Now we need to go down 50%. So top 50% gets us to the middle. Left probably. Okay. It’s not bad. Maybe six in here. I don’t want it to get out of the bounds of our other content. It looks like it is just a little bit. I’m going to go back to five in. All right. I mean, I’ve got like we’re so close. I also want to check out the padding. Oh, oh, okay. We also have to make it overlap. Oh, all righty. What we can do for that is padding top zero. So at least we’re very close. I’m thinking about whether I should do the cards. Okay. Testimonial slider. Testimonial slider overlap. I’ll just do an overlap like that. Okay. And then I think what we can maybe get away with. How does this work? So this can’t actually be 50% down. All right. We’re going to go testimonials. Oh, and this needs to be in testimonials. Slider. I don’t want to target all splied arrows. I want to just target testimonial sliders. Slide arrows. Okay. Are we still working? Yes. We’re still working. Okay. So actually what I want to do is nest all these. I got to remember to zoom in for you guys. All right. I’m pasting this inside. Please format. All right. So testimonial slide arrows. Now what I can do is this testimonial slider.

0:32:46
I can start doing my modifier classes. So for example, overlap. So testimonial slider overlap. We’re going to target testimonial cards. And we are going to I think what I want to do here is margin top because that’ll pull up content that’s underneath. But I don’t know. I don’t actually know if that matters right now. Let’s just see if we got something working here. Okay. Something’s gone wrong. Save. Refresh. There we go. Okay. But we’re not seeing what we want to see. So testimonial slider overlap. Testimonial card. This is a testimonial card, right? It’s a testimonial card. Yes. I’m going to do a margin top of minus 2m. Okay. It does it does go up. But there’s a Z index issue. So testimonial slider overlap testimonial cards. The index of three. Spect. Margin top minus 2m. Oh, I bet. Okay. I know what’s going on. I think it’s yeah, that shouldn’t matter. It’s an overflow on. Oh, gosh. There’s I bet there’s an overflow on one of these wrappers of hidden. Slide track overflow hidden. Oh, boy. Okay. We want to overflow. Yes. We want to overflow hide the x-axis, but we don’t want to overflow hide the y-axis. So what I’m going to do, what is that? That’s slide track. Okay. So testimonial slider slide track overflow y-visible. And then slide track testimonial slider overlap. Oh, this this isn’t probably not a it’s probably the testimonial card is probably not a direct child.

0:36:10
Now are now our top margins working, but we’re still not let’s try this. Now we’re still not fixing the overlap. Okay. Inspect. Slide list. Slide track overflow y-visible, but overflow hidden is still on there. CSS short overflow short hands. This is not showing me what I want to see. Okay. I love all these challenges. Because if we if we do overflow visible, what we’re going to end up with is the card spilling off the right side of the page, which may need to happen. Honestly, well, that screws up our arrows, doesn’t it? Now people are like navigating on top of the cards. That would work if we put the arrows underneath like this is exactly what’s what we’re going to need to have happen for this slider right here. So that that’s actually good. So what we can do is instead of testimonial slider overlap, what we need to do is make a we need to make a utility class for sliders in general and slider overflow needs to be like one of our things. And then if it’s slider overflow, we can do slide track overflow visible. And then we just pop that class onto any slider and bam, we have overflow. So that would be nice. This is legit exactly what we need to have happen with our services thing right here, which makes me very confident about our ability to use this for at least for this. This is a toughy. I’m going to need to I’m going to need to put more thought into this of how we can and I don’t know what’s going on here. This this looks retarded. Sorry.

0:39:03
That this is no. Why? What is it? No sense. Oh gosh. Oh man. Okay. All right, let’s do this. Let’s let’s not get bogged down too much. Let’s do shift command. E container. Get me a container. Please get me another slider. Here’s a container right there. There’s a slider right there. This is going to be a services slider. This is going to not have all these three things in it. Now we can probably move a little faster. I’m popping a service card in there. On my services slider. Oh, I know that there was a background color on here. So let’s get rid of that. And then I can come to content options. Slide direction left to right. Keyboard. Don’t care. High was what auto we did auto height spacing. Var space S. Start index zero items to show. How about let’s try four items to scroll one. Speed. No, no, no, the dead doesn’t matter. Doesn’t matter. Doesn’t matter. What else did we do at arrows, right? Show arrows. Previous arrow, which I don’t think matters at this point because it does what it wants. Next arrow. Next. Oh, right. Okay. Okay. Now we’re going to take this and loop it. Oh, now we don’t want to loop the overlay. We want to loop the service card. Loop the service card with services. Post per page 20. Service card should be. See, that’s the only thing about this is I don’t think we can make it truly, truly HTML5 compliant. Like these are supposed to be LIs and URLs. And I think if we do that, it’s going to mess with the slide code. It’s going to throw things out of whack. I could just say, hey, these are articles. That’s at least better than nothing. What in the world? Okay.

0:41:47
Well, there we go. So it’s looping. All right. Now what we need to do is just bring in our service service card heading. And then here is our service card text, our service card description. And I need to probably limit that to a certain amount of words. Let’s do 16 words. Let’s choose at random 12 words. 8 words. 10 words. Oh, we’re getting some severe. Ah, yeah. We can fix that. Just style on this section. Layouts overflow. Hidden. Oh, God, that’s going to kill the overlap. Hmm. Why that is not an X axis, sir. Well, we can’t live with that. We may not be able to overlap this slider. This is above my pay grade. Crap. We’re going to be able to do it down here because this is going to be fine down here. Okay. Let’s keep going with this. Why does this not have a class on it? This is my, this is just a container. I can delete this. So at least we’re just dealing with our slider here. Why did I, why did I have a container inside a container? This must be in a container by itself. Okay. Now, now we’re looking good. Why does this not, did I forget to put a class on the heading? What was going on the other day? Oh, I didn’t even make one. How did I, how do I, I guess, it’s styled by itself. Okay. Fine. Whatever. We all make mistakes. Let’s see what we got on the front, on the front, home, in front page. I don’t even know what it’s called anymore. This, this should breaking my brain. Why are these arrows black? Oh, they’re all black. Okay.

0:44:36
I’m thinking this is going to need to get a little smaller. He wasn’t when he, when we did the design, it was like, yeah, window tenning’s cute. But when it’s like home window tenning, oh, actually, it’s in there twice. It doesn’t help. It doesn’t help that our, oh yeah, this is all screwed up. Okay. Let’s delete what we got in there. Service card heading. Let’s see what that does for us. Okay. That’s better. We can live with that. But there is some long ones like expel, commercial window tenning. Why are these still having extra window tenning? Okay. There we go. Now we’re fixed. Okay. All right. These all look good. Where’s the expel one? Yeah. But that’s, that’s fine. That’s fine. Still works. Okay. I like it. We’re doing good. So now what we’ve learned, watch this guys. I don’t know if it’s going to work. I’m just saying watch this. I have no idea if it’s going to work. Slider overlap. No, not overlap. Sorry. Wrong thing. Overflow. Overflow. See that? We can just break the slider. Just like that. Oh, no, there it is. Neckhole, right? Little utility class action there. All right. Hey, we’re close. Where do these dots come from? How come this one didn’t have dots? Oh, pagination off. Okay. I have fixed the dot problem. All right. Everything’s snapping back into view now. That’s good. All right. Now, now I like what we’re looking at here. You can even interact with the slider inside the builder. That’s pretty, that’s pretty sweet. Okay. I’m thinking we should, this testimonial arrows thing, the splied arrows.

0:46:50
I’m thinking we should do slider nav left. And then we can do, oh, okay. Actually, we want to nest this slider nav left. I think we’re going to need an extra bracket there. Let’s see if we can format this. Okay. So slider nav left gets your arrows over there. Slider nav left. Just thinking about this one second. I’m just trying to see how we can make this more efficient. I mean, for right now, we can do this. Nav right, we get not, not right bottom. So this would be like bottom zero or probably like negative five m. And then left would probably just be zero at that point. This didn’t even actually ever do anything. So we can just remove that and get that out of the way. Slide arrows, slide arrows, nav bottom nav left. Slider nav left, nav bottom. Okay. So now if I do slider nav bottom, hey, look at that. I don’t know if they’re aligned with anything, but at least they moved. Okay. So inspect. What are we looking like over here for our content? Why are they like way outside the bounds? All right. So left, we’re going to bring them in 2m. And then this only needs to be like minus 2m. Look at that guess. Oh my gosh. Oh, swish. All right. I don’t like those giant arrows though. So let’s do this. Slider nestable, slider service card. Yeah, nestable. Oh, I just want to change my, oh, here we go. Arrows. Okay.

0:49:41
20, 20. Well, that didn’t do anything. Did it? Okay. All right. Now they’re a little more friendly with each other than they were. Well, when all else fails, figure out what, here we go. Splide arrow. And then it’s the eye inside. Splide arrow. And I’ll just target whatever’s inside. Splide arrow. Just to make it easy. Slider, splide arrow. This is our, this is our service service card slider. This is a services slider. Splide arrow. Well, I’ll just put it up here. Make it, make things easier. I think it’s actually targeted with font size if I’m not mistaken. Yeah, because the height undo jack. There it is right there. It’s a font size. They got to fix that in bricks. That’s a little bug. We can, we can report who wants to be a champ and go report that bug for me. So I don’t have to do it. Tired to report in bugs. Where am I? What am I doing? I don’t even know font size. Var text. X, XL. Yes, sir. Yes, sir. Okay. How big are they on the Figma? Oh, they’re actually different arrows altogether on the Figma. Okay, no problem. Previous left that one. And right that one. I think this is fine. I mean, other than the fact that they’re facing each other and are completely going in their wrong direction. Their size and shape is fine. Okay, our services. What can we do for you?

0:52:18
I’m not liking how this is and this are the exact same length. Well, that’s clearly too much. All right, just a little bit more, you know, a little bit more structure into this section here. There we go. Okay, I mean, this wasn’t a total fiasco, right? Now the question is, can I link these things correctly? Can we do a little clickable parent action? We also need to make sure that our images have alt tags that are dynamic. And what we’ll do, I don’t know if you do featured image as the alt. I don’t know what that does. So what I’m going to do is real quick, man, I don’t know. First, let’s see if it has an alt at all, like by default. Is it pulling the featured image? I don’t even know if that featured image. Gosh, we’re all over the place, aren’t we? It’s this one right here. Where’s the alt box? Right here. Okay, usually it’s off here to the right. I don’t know why it’s like down here. All right, so we’re just going to say that this is an a gold AMG gold AMG vehicle. Just whatever. Let’s just throw something in there. Now let’s refresh inspect. Service card overlay. Oh, here’s the image right here. alt right there. Ah, I already got it. Okay, perfect. So we’re just going to rely on that.

0:54:31
That’s fine. What I do want to do is change this to a figure instead of just an image. That’ll improve that a little bit. I want to make sure that this object fit as cover as well. I don’t know why it wasn’t already. Oh, oh, God, I’m doing some of the ID level, my friends. This is absolutely treacherous. There we go. It’s sent to cover there. And we’ll set it to figure here. Okay, save. Now let’s try clickable parent action. So this heading needs to link to do dynamic data. It needs to link to the post link. It is an H3. NAP. Oh gosh. Okay, undo. Now we’re going to try. Let’s just see if it’s clickable here. Oh, yeah. Oh, yes. Okay. Now let’s see if clickable parent can actually work here. Clickable parent. And then what I’m going to do is I’m going to go into style and make sure that clickable parent. I think I did this in the CSS, but I don’t know. Let’s just see without modifying anything if it works. Okay, no. Let’s see the structure. So this body right here, service card body needs to make sure that we set this position to static. And then so that’s one. And then the overlay is the next parent. We need to make sure it’s set to static. Oh, but it’s absolute. I don’t know if that I don’t think that’s going to mess with it. I don’t think that’s going to matter. The service card itself is relative by default. Let’s see what we got. Does that improve anything? No. All right. One last try. Clickable parent. Lay out.

0:56:40
Oh, it’s a locked class. Okay. Service card heading. Position static. Say, did this help anything? Yes. Yes, sir. Yes, sir. Okay. Next thing we want to try is when service card is hovered, we’re going to transform it. Why minus 1m. And then we’re going to transform point three seconds ease in out. Save. Yes, sir. Yes, sir. Okay. Are you all annoyed with that yet? Oh, gosh. It’s I’m telling you, man. It’s I’m feeling it. We are late in the day. I’m kind of happy with this. You know, here’s the actual here’s the actual page. This is a problem. That’s a problem. Okay. Grab this section. This I’m confident in. We just go lay out overflow, hidden, and this section is good to go. So this section will not overflow anymore. So I you can see the overflow stopped from this section. It’s just this section. And I am just I’m going to have to go back to the drawing board and figure out if there’s a way we can get this top overlap to happen without having a side overlap happening. And I’m going to leave this to the group too. This is a phone a friend moment. I got I got three lifelines on this project. Okay. I’m phone in a friend. The other one doesn’t count. The other one doesn’t count. I’m making the rules up right now. I get the phone a friend once. I get to call somebody once. Oh no, that’s phone a friend. What what are the other things? Hold on three three lifelines on who wants to do it. It’s already guessing what I want to know. 50 50. That’s going to be tough. I don’t know if bricks can give you a 50 50 phone a friend ask the audience. I get one ask the audience and I get one phone a friend.

0:59:04
Okay. That’s just the rules. The rules for the rest of this build. So right now I’m using my phone a friend or my ask the audience lifeline. That’s what I’m using right now. The ask an audience member lifeline. So if y’all know how we get this overlap to stay without this overlap happening considering that I’ve tried overlap X and that takes away the Y overlap. Yeah, you saw you saw what happened you saw it punk me okay. We don’t need to keep reiterating it. I do want to reduce the padding here. So this can be like var section space Xs. Should we do Xs or should we do S? Xs S. Let’s leave it at S. All righty. I think we accomplished what we set out to do. How much time is it exactly at an hour and I’ve been rambling you know half the time didn’t actually take an hour. These actually actually let’s stop. These can be bigger. I’m not liking this. Okay. And what did I set? We didn’t I set a number here. Slide nestable content options. Yeah, I said show four items. One, two, three, four. That looks like five to me dog. Maybe because it’s just a small screen. Yeah, I guess that’s that’s what’s going on. Okay, so what I want to do the this should be like feel bigger and bolder right? We can probably do that by going to three. Yes, yes. I’m liking this. Okay, that was easy right? Oh, we haven’t even put a care in the world as to like what’s going on with mobile. Oh, now I can extend this. So this doesn’t have to be capped as much. This can be like 15 words. There we go. Okay, let’s see what oh, you know what? Here’s what’s going on with mobile.

1:01:11
Okay, that’s fine right there. Now we’re down to three on mobile. I don’t think I want it to be a carousel. I don’t want it to be a carousel after this break point. So right here, I know guys, you might think this is crazy because of the amount of work these carousels take. But I am going to go container. This is our carousel. I’ll do slider. Okay, I don’t know if this slider needs to be in that should it be even nested? Does it even need to be nested? Why don’t even need to be nested, does it? Oh, yeah, it does. It 100% does because now it’s just going to take up the whole freaking page. Yeah, yeah. Okay, I mean, what we could do. Let’s think about this for a second style layout with var with VP max. ACSS to the win my friends. That references our site width. So we get an automatic container back to the width that it should be. And we dropped a DOM element that we did not need. Okay, that feels good. Let’s go with slider nestable at this break point display, none gone. And what we’re going to do is container and put this up here. Okay, and then this is going to be a grid too. And this is going to be a gap of M and it’s going to be a stretch. And it’s going to be grid S1. Okay, and then what we’re going to do is we’re going to take this card, which is by default my friends because bricks is slick with it. It is a loop. And it’s going to give me the exact loop that I want again, I think. I don’t I’ve never tried to copy and paste a loop before.

1:03:52
Oh, card. Yeah, guys, this is too easy. You can never do this with oxygen. You could never do this with oxygen. And then what I’m going to do is display none, display none. No, that’s wrong. Display none. Where do my display classes go? Hold on. Automatic or we have an automatic CSS failure automatic CSS cheat sheet. Display. Display none should work. Do I have this display classes turned off or something? I am using the beta, the beta of the new one. Okay, display none. Save. It’s definitely not doing that. All right, let’s just go in here real quick. Automatic CSS options, display classes. I don’t even know if those are turner. Yeah, they are. And they’re on. All right, I’m going to have to investigate that. Okay, for right now we’ll just use good old bricks. Okay, so we’re just going to do this at the ID level because I only want to apply to this one grid or we can do services services, slider backup. This is the services slider backup grid. All right, and the services slider backup grid is going to be display none. Where’s display? Display content display none. Oh, wait a minute. Maybe it’s not maybe it’s not a CSS. Something else going on. I can’t even display none at the ID level. What is going on? It’s not a CSS. Watch this, guys.

1:06:23
Watch this. Watch this. I’ll prove it to you. I know I’m not crazy. Okay, what’s going on? What’s going on with the grid? Why is the grid not going away? I don’t know what’s going on. Save. Refresh the builder. Container. Wow. Okay, let’s inspect. I’ve never seen this happen before. What? Let’s inspect this on the front end. Inspect. Look at that. Oh, it’s being overwritten. Display flex on the stretch. Rix container. Display flex is not being used there. Oh, that’s right. Somebody else brought this up before. Because it’s important. Yes. Okay. The problem is, ACSS grids have to be display grid important. It’s like because of because the builders all use flex controls, all the grids would break if they weren’t display important. Okay, no problem. No problem. No problem. No problem. No problem. No problem. No problem. Service card services. What did I name this thing? Services slider backup. Services slider backup. This is actually easier here. At media, Min with 768 display non-importance. Gone. And then when you come down, come on now. Oh, it’s not that it’s this window. There we go. Okay. So now you come down. Never mind all this going on up here. This overflows crushing our page. But I just want to see. There you go. Our slider magically transforms into a grid of two columns. And then when you get down even lower, it transforms into a single column grid. That’s exactly what I was looking for. I think that’s going to be a lot more friendly to mobile users. Okay, for right now, just so we can see this in real time, I’m going to overflow, hit in this. And it is going to kill our overlap. But it’s also going to make the page render properly. So we can actually see what I was just showing. Okay.

1:09:25
So there’s our slider looking good, looking good, looking good, looking good. People on tablets can still use it just fine. Looking good. Even there. Now we’re getting a little iffy, but it’s still usable. Still usable. And then we go to a grid. And then we go to a single column grid. And we’re getting more overflow now from from this up here still. That thing is a disaster at the moment. But we’ll end up fixing it. At least I feel good about our services grid. I also want to watch what we’re going to do here. I don’t like this text at certain breakpoints. So like in here, it’s probably still fine there. Maybe not even there. That’s really like a desktop effect. I mean, here I could make the text a smaller. So let’s see what we’re doing with our accent text. So font size is 10 rim. I don’t even know if you I don’t think I’ve ever tried to put a media query in a mix in. But we’re going to do it. We’re going to work for sure we’re going to try. Let’s do a max width of 992. And say font size is six rim. And then at the next breakpoint down, which is 768. And I think I have to do 767 and 991. If I’m thinking, but I’m dyslexic. So that may be when you do men with and not max width. I don’t know. This is going to actually be display none. And this rule probably does need to come after the display flex rule. I mean, I don’t even know.

1:11:43
It’s not giving me an error. Ha, it works. Ha, it works. Oh God, I love sass. I just absolutely freaking love sass. And then it’s gone. There’s the ys text. Okay, it kind of goes off the screen, but oh, there, right, right. When it’s about to go off the screen, it pops down to a better size. And then it’s going to disappear altogether right there at that breakpoint. Okay, we’re getting things cleaned up. That’s it for me today, guys. I’ve got a, I’ve got a rest and recuperate this weekend. We got a big launch next week. ACSS 2.1 is coming out next week. Frames is coming out next week. Bricks 1.5.1 is coming out. Maybe this weekend. So I got it, I got a rest. I got it, I got to recuperate. I love you guys. Thank you for being here. Thank you for sticking around. Thank you for engaging, interacting, commenting, showing love, helping to promote all the stuff that you guys do for the inner circle for automatic access. Thank you. I’m out. Peace.