PB101: L11 – Responsive Development With Breakpoints & Media Queries (+ CSS Cascade & Specificity)

0:00:00
Welcome back, we are going to continue page building in this lesson. We have some unfinished business from that message-ly landing page that we created a couple lessons ago. One of the parts of unfinished business is related to responsiveness. We have to go in and make sure that that landing page looks good at various different device sizes which requires us to know about media queries and breakpoints. So we’re going to learn about media queries and breakpoints, then we’re going to jump back into that messagely landing page and make some adjustments to help that page be more mobile responsive. I’m going to go ahead and share my screen. Let’s talk first about the what and why of breakpoints. So what breakpoints allow you to do and these are breakpoints up here. You can see that I can select different breakpoints to view the website at, and these represent different device sizes.

0:00:54
Every page builder is gonna have a little bit of a different setup for where you find these icons, what the breakpoint values are, and so on and so forth. But for the most part, breakpoints are breakpoints. They work the same across all different page builders. We’re gonna talk about the two main types of breakpoints, but just know that this is a very, very common setup for breakpoints in page builders. What these breakpoints allow you to do is to adapt the website’s styling to various devices and device modes.

0:01:28
Note that it allows you to adapt the styling. It’s not changing the HTML of the website at different breakpoints, it’s changing the CSS of the website at different breakpoints. And basically this just ensures that your website looks good and functions correctly for all visitors. We want people to have a good experience whether they show up on a tiny phone or a gigantic 32 inch desktop monitor. And then there’s all different device sizes in between. There’s different device resolutions which complicate things even further.

0:02:03
But it’s our job as web designers to make sure that the sites that we build look good across all these different devices. That doesn’t mean that they look perfect. It doesn’t mean that everything is exactly how you want it to be on every single device size and resolution imaginable. It just means that the site is responsive and more or less people are going to have a great experience regardless of the size of device that they are on.

0:02:29
So let’s talk about the first type of media query. And that’s really what controls these breakpoints, or really what I should say, controls the change of style at different breakpoints. The first kind of media query is called a max width media query. And in CSS, you write it just like this. So you write the word at media and then in parentheses you put max width and then you put the value of the breakpoint. And this is the standard most common media query. You’re going to see these all the time. You’re going to use them all the time. And what this does is it changes styling instructions at that value right there. So when a device is 767 pixels wide, from that point down, the styling is going to change based on the rules that you put in, or that really what we should say is the new styling instructions that you put in.

0:03:25
The media query itself is more or less the rule. And then you define styles or redefine styles for that breakpoint. So you put those style instructions inside of the media query. I’ll show you how that looks in just a second so that you can visualize it. But this is what the page builder is doing as well. And those styling instructions, those new instructions are going to take effect from that point down. So all the way down. If you want it to change again at a lower device size, then you write a new media query for that new max width. So in Bricks by default there are four break points. Okay and I’m going to open this panel right here just so you can see there’s a desktop, a tablet portrait, a mobile landscape, and a mobile portrait. And if I click the little pencil right here you’ll see that this is 1279 pixels. That is the break point for our desktop break point. So what this means is when we style our website, it’s going to look the same on a 1920 pixel device, on a 1440 pixel device or whatever, but the minute the device gets smaller than 1279, things are going to start to change.

0:04:40
And then we have another breakpoint at 991 and styles can change yet again. And then we have a final breakpoint at 478 where styles can change again. And all the builder is doing is writing these media queries for us on the back end. And in bricks, you can add additional breakpoints. You can take breakpoints away. You can change their values. This of course is not the case for every single page builder. Many page builders have fixed breakpoints. You cannot edit them. You cannot add new ones. You can’t remove any.

0:05:20
Brics is very flexible in this regard in that it allows us to add additional breakpoints if we want to, or even take some away. This gives us more granular control over how our website looks across various devices. However, it also might mean that you’re gonna be doing more work. The more breakpoints there are, the more decisions you have to make along the way. Okay, so I’m going to go ahead and close this panel and let’s just see how this functions and how we actually make it work inside of a page builder. So you can see right here this button says I’m going to disappear at 991 pixels. So I’m going to go find the 991 pixel breakpoint and I’m going to select it and you’ll notice that that button is no longer there. Why is that button no longer there? Well, I can select that button over here and if we go to layout, we can see that the display is set to none. So setting the display of something to none makes it disappear. It doesn’t make it disappear from the HTML, mind you. It just makes the element visually disappear. Okay, so now I go back to the base breakpoint, the desktop breakpoint, same element selected.

0:06:30
I’m going to go down to display and you see it is set to flex. So it’s set to flex on the desktop, but at 991 it’s set to none for display and therefore it disappears. And if I go down, you’re going to see that on the next breakpoint, it’s still gone. Why? Because that change applies to that breakpoint and all lower breakpoints by default. Okay, let’s look at this one. I’m going to turn purple at 767 pixels. So at 991, this is still not purple, but at 767 it now turns purple and it is purple at the breakpoint below that as well. So I’m gonna go ahead and click on background and you see the background color is set to purple right here at this breakpoint. If I go up to the next breakpoint, there is no background color set. Yellow is the default in Bricks for buttons, so it’s just going to be yellow by default.

0:07:25
There’s no background color set here. There’s only a background color set at 767, so that is when that button will change to purple. Let’s go ahead and look at this one. I’m going to get 100% wide at 478. So I’m going to go down to 767 and we see that well that’s not a hundred percent wide. Now at 478 it extends all the way to the edge. So you’ve seen examples where I change the width of an element, I’ve changed the background color of an element, I’ve made an element disappear. Anything that you can do with CSS, borders, padding, margins, anything, grid structure, anything you can do with CSS can be changed at any break point you want based on writing a media query.

0:08:08
And a max width media query, you gotta, this is a key point to remember, a max width media query means at that break point and below is where my styling is going to take effect. Now, let’s talk about the opposite kind of media query called a min width media query. And you simply write it like this, at media min width 767. And the only difference here is this changes the styling instructions at that breakpoint value and up.

0:08:37
So you’re saying at 767, I wanna make a change on that device and everything above that. So laptops, desktops, everything, 32 inch monitors, 60 inch monitors, whatever it happens to be, that’s where the styling is going to take effect. But below 767, we’re not going to make a change to the CSS. So you can see this button right here says I’m only visible above 991, kind of like this button that disappeared at 991. But what is the difference? So one thing is page builders typically, first of all, almost all the breakpoints are always max width, and they don’t even let you have min width queries for the most part.

0:09:19
Now, Bricks has a mobile first mode, which is basically taking all of the default breakpoints, and instead of them being max width breakpoints, they’re min width breakpoints, and this changes your entire page building workflow. I actually don’t recommend mobile first development inside of page builders, at least not yet. They just, nobody has seemed to make it efficient, okay? When you’re writing CSS by hand, it can absolutely be more efficient.

0:09:44
But inside of a page builder, I’m not a big fan of it yet. I don’t recommend, if your builder allows you to do mobile-first development with min-width media queries, I don’t recommend you do that. I recommend you stick with max-width, stick with the standard workflow, you’re probably gonna be better off that way. But when I need to use a min-width media query, I can still use them simply by writing my own CSS. And I can do this inside of Bricks.

0:10:08
I can do this with WP CodeBox. I can do this a lot of different ways. And this is exactly how a media query is written. Like I said, you write the word at media, you put in either min-width or max-width, you put in a value. And I want you to notice that I am using pixels here. If you go back to our pixels versus relative units kind of conversation, that lesson, it was one of the very early lessons in this course, I said that you hardly want to use pixels for anything, but media queries is one of those things where you actually want to have a static value. It’s just gonna make things a lot more consistent and more predictable, okay? So what I did is I did an at media query and then I did open curlies, right?

0:10:50
And then so this is basically the media query right here. And it’s an empty media query waiting for me to define new styling. Now, what am I going to style at this break point? Well, in Bricks, we have the word root by itself, no colon. Root is a reference for the current selected item, whether that’s an ID or a class or whatever. And so this is just like writing this ID right here. And then I’m just setting the display to block. So this element will be set to display block at this breakpoint right here.

0:11:22
Now if you notice, okay, let me close that panel right there, and let me click on this button. I’m gonna go to layout, and at the desktop, okay, you’re gonna see that the display is set to none. So this button is display none by default, but if I come down here, I can see that at 991 pixels and above, it’s actually overriding that instruction and setting the display to block. But when I go below 991, okay, that button will disappear because the default styling that was display none now takes over.

0:11:58
And as you can see, min-width media queries are a little bit more complicated to understand, right? Like I said, it changes your entire workflow of how you’re structuring your styling instructions and all of that. Okay, and then this one is only purple at 767 and up, right? So here I am at 991, which is obviously above 767, so it’s purple. Let me go to the style tab and see where our instructions coming from.

0:12:27
There’s our at media query, min width 767, change the background color of this element to purple and change the color, which is the text color, to white. Okay, so I go down, it’s still purple, but the minute I go below 767, it changes. It’s no longer purple, the text is no longer white. Why? Because that media query was only changing the styles at 767 and up. Okay. All right. So that is a min width media query. Very, very important to understand. There are many times, even if you’re using a max width media query workflow, a desktop first workflow, there are times where min width media queries come in very, very, very handy and actually make things a lot more efficient.

0:13:12
Okay. Let’s continue down. Now we’re going to talk about orientation media queries. So instead of defining a max width and putting in pixels, we can actually target devices by their orientation. The browser knows from the device software whether a device is in landscape mode or the person has turned it into portrait mode. And you can actually change a website’s styling based on those orientations. OK, so portrait and landscape are your main options here. However, you can also combine media query instructions. So look at this. I can combine orientation, landscape and a max width at 640.

0:13:53
So basically what this is saying is it has to be in landscape and then it also has to be at 640 and below. Okay. So I’ll turn purple in landscape. Now, in order to look at this, we’re not going to be able to preview this very well in the builder. So what we’re going to do is go to the front end and inspect in our mobile mode right here. Okay. So we see orientation, media queries, I’ll turn purple in landscape right now. This preview screen is wider than it is tall. That is a landscape format. Okay. And so what we’re going to do is keep it in landscape and we’re going to see that all of this does not change that button. Now watch this. I’m going to bring in the side and start to make this screen taller than it is wide. And you’re going to watch that button change. Let me keep it in view here. Right there. So that’s the point at which we change from landscape to portrait, because the aspect ratio flipped, okay?

0:14:56
And so you see these buttons both change based on that instruction. So I’ll turn purple in landscape, and the other one will turn purple in portrait mode, okay? So we can use orientation media queries, we can combine media queries. There’s a lot going on, I get it, okay? But this is very important to know for controlling responsiveness across your devices. All right, now let’s talk about how media queries leverage the CSS cascade and are affected by CSS specificity. Now, CSS cascade and specificity, they would be introduced to you in most courses very, very, very early on.

0:15:37
I have not introduced this concept yet because there hasn’t been a need to. I like to introduce things when they’re needed and now these concepts are needed because media queries rely on the cascade and they also rely a bit on specificity. So for this we’re going to hop over into CodePen and we are going to play with a box, one of my favorite hobby. Let’s see what this box is all about. Well, first of all, I created a custom HTML element. We learned about those in the last lesson called my-box. And it has a style tag that is empty.

0:16:16
You guys haven’t seen that before, but this is gonna come in very, very handy today. It has an ID of my box. So we have a my box with an ID of my box. We have a class of my box, another class of my box double dash dark, and then the closing tag for my box. So there’s a lot going on here. And by the way, my box is also wrapped in a body tag, okay? That’s gonna come into play as we work through this as well.

0:16:46
Right now, let’s go down here and look at my box. I am targeting the HTML element, not the ID, not the class, not anything else. Just target the HTML element. Set is displayed a flex that it’s background color to read, said it’s width and its height. Now that obviously has created a red box on my screen.

0:17:05
You can see it right here now. I’ve got a bunch of other instructions and we’re going to play with these and see what overrides what. What takes precedence? Because one of the questions a lot of people have is, how does it know what styles is gonna, it doesn’t matter what order you put the classes in when you put them in the HTML like this. So how does the style sheet know what styles to apply? And that’s where specificity and cascade come in. So the first thing that you have to understand is that cascade is like the, if we’re not dealing with specificity, if nothing has a higher priority than anything else, then the cascade is what comes into play.

0:17:45
And the cascade says, if it comes later in the style sheet, like the instructions were added later than earlier instructions, the later instructions, those are going to take precedence. Those are gonna be the preferred instructions. So I can literally duplicate the my box instruction and change the color to black and you are going to see the box change to black. So we have conflicting instructions. This says my box is supposed to be red. This says my box is supposed to be black. Which one takes precedence? Well the one that comes later. I’m gonna take the black one and I’m gonna move it to the beginning and you’re gonna see that the box stays red.

0:18:28
It wants to be red now, why? Because red was the final instruction of what that box’s color was supposed to be. That’s how the cascade works, from top to bottom. So when you’re writing custom CSS, you have to be careful where you’re writing your new instructions. If you’re writing new instructions at the top, you’re kinda screwing up the cascade a little bit. The idea is that we start at the top and we move our way down.

0:18:53
And obviously you don’t want to do this kind of thing. You don’t want to say, oh, I want to change it from black to red, so I’ll just repeat the instruction and change one detail. That is an absolute travesty, violation, felonious behavior, felonious behavior. Okay. You’re absolutely going away for a very, very long time. Rehabilitation may or may not be possible for somebody that does this, I don’t know. Okay, so obviously don’t do that. So you understand cascade now, at least the basics of cascade. Let’s talk about specificity. So the next thing I’m gonna do is I’m gonna introduce the star selector.

0:19:32
And now you see, let me put this back on red, okay, good. That’s the way that it was. The black one wasn’t the way that it was. Red was. So I’m gonna keep it on red. And if I get rid of this, you’re gonna see it changes back to red. Okay. So I’m gonna introduce the universal selector again. And what you’re gonna see is that this kind of increases the specificity or does it?

0:19:55
Does this increase the specificity? Well, we can test it out by putting it before the other instruction. And look at this guys. Tricky, tricky, tricky. We didn’t actually increase the specificity of this. That star selector that I’ve been showing you how we can use that is actually a very safe selector to use because it can easily be overridden by other instructions. Now the ID is completely the opposite. And this is why I say you should not style at the ID unless you’re being very very very careful. So watch this we have targeted the ID right here with the with the pound sign the hashtag okay so we’re targeting this ID right here setting the background color to green and you might think well Kevin this is just a cascade issue it’s not a specificity issue your instruction of background color green came last, therefore the box is going to be green.

0:20:55
Watch this. So I’m gonna take this and I’m gonna move it ahead of my box right here. And it still takes precedence. Guys, I’m gonna move it again. I’m gonna put it before the body star selector. And it’s still going to take precedence because an ID has the highest level of spec, well, the second highest level of specificity. There is one level above an ID, which we’re going to look at at the end, but an ID will absolutely, they are very difficult to override.

0:21:29
So once you’ve styled something at the ID, you try to come in and style elements, not going to happen. You try to use classes, not going to happen. So let’s introduce this class right here. You guys have seen me use classes before. Well I have a class called my box and I want the background color to be dark red and here is my instruction. It’s the last instruction in the style sheet. So not only is it you know a specific thing, a class is more specific than this element right here. My box is not dark red. My box is not dark red because none of these things can override the power of the ID. I have to unstyle the ID, take away that ID styling, and now I can have a box that is in fact dark red.

0:22:19
So we have a duplicate of the class my box that says, no, no, no, no, no, no, sorry, I was wrong, be hot pink, right? And why does this one take precedence over this one? Simply because of the cascade. They have the same level of specificity, but the cascade wins, right? Now look at this. I’m going to undo this one. This says be blue. It comes before two additional instructions for background color on my box, but it takes precedence. Why?

0:22:54
Because the presence of the body tag, we’re basically saying find a body and then find my box, whereas these just say, find a my box. Well, this is more specific than these two, and therefore it takes precedence. These two instructions are gonna be ignored because this is the more specific instruction. And this is why you can style boxes or cards or whatever they happen to be in one grid versus a different grid and they can look different even though they have the same classes. I’m knocking stuff over on my desk. Now let’s look at yet another thing my box double dash dark. Okay. So I’m going to come up here and we’re going to see that this is obviously overriding things. So I’m going to get rid of that.

0:23:37
And now we have two instructions, my box dark red, my box hot pink, my box dark is black. Now, this is not more specific, even though it looks fancier, it’s not more specific. This is a class, just like this is a class. The double dashes are just BEM. Remember we’ve already talked about BEM, block element modifier. This is how you denote a modifier.

0:24:03
And this is simply for organization purposes. This does not change the specificity of the CSS. If I take this hot pink one, and I make it come last in the cascade, then the box is going to be hot pink. It is as simple as that. So if you’re using modifiers to modify the style of an element, you better make sure that those modification instructions come last in the cascade. That’s the only way the modifier is actually going to work.

0:24:33
Okay, so that’s, and that’s how modifiers work. People ask again, how does this one take precedence over this one? Well, it’s because the instructions for this one come last in the style sheet, not last in the HTML, mind you, watch this. I can remove this, put it first, nothing is going to change. The order that you list the classes in has zero bearing on the style outcome. Only the style sheet has the instructions for how an item should be styled.

0:25:01
These are just dumb labels. You’re just slapping labels. Doesn’t matter what sticky note comes first or last does not matter. This is what matters. The actual style sheet with the instructions. Okay now if I want let’s take this up here and let’s see something. What if I want dark to take effect right even though these other two instructions are down here. I really want to make sure that the my box darks are dark always like regardless of what other instructions are going on I can increase the specificity. So if I say my box find a my box with a class of my box dark. That’s a more specific instruction. This will take precedence now over these two instructions right here. So if you can’t affect the cascade, which by the way, you know why this is so important?

0:25:51
Because you’re not typically writing all your CSS in a style sheet like this, right? In a style sheet, I can just move stuff around, whatever. In a page builder, you can’t determine the order the CSS is written in. So sometimes to override things, you have to know what specificity is and take advantage of increased specificity in order to get these overrides to work. This is probably one of those lessons, like a few of them now, that you’re gonna have to watch a couple different times before it really clicks.

0:26:19
And you’re gonna have to get into CodePen and just kind of play around with this stuff. And as you’re playing with the box, like, you know, we all love to do. When you’re playing with the box, you should absolutely be thinking ahead. Like, okay, before I make the styling change, what is going to happen? You’ve got to predict what is going to happen in the canvas before you make the instruction and then see if you’re right. It’s like a live pop quiz. Now let’s look at one last part of specificity and that is what is called an inline style. So I’m gonna actually turn on, we’ve got a lot, look how many instructions there are here.

0:26:57
And we see that this one right here is the one taking effect because of this increased specificity. I can even add a body first. I can say, hey, find a MyBox with a MyBox dark class inside of the body. That is super, super, super specific. Give it a background color of black. Obviously we have a black box. Watch this. Background color, hot pink. Save. And it is going to absolutely become hot pink. Let’s even turn the ID on that was telling it to be green. Remember this ID that overrode freaking everything? Watch.

0:27:29
I will come in. I’ll take this background color hot pink out. That box gonna turn green my friends. Okay. Look at that. Box turned green because that ID styling overrides all of this. That’s why ID styling is dangerous. Okay? Now I come in here, but even an inline style, the highest level of specificity where we’re literally putting CSS in the HTML. Okay, we’re not even in a style sheet anymore. We are injecting CSS into the HTML, that is the highest level of specificity. And you’ll see insane builders like Elementor use inline styling in some places. Boggles the mind! Absolutely felonious behavior. I know I rag on Elementor a lot, but my friends, they have earned it. They have absolutely earned every ounce of it, okay? So don’t feel bad for them. They have done lots of lots of hard work to earn their reputation.

0:28:30
Okay, so this is the cascade, this is specificity. So what do we need to know about how breakpoints handle this, okay? Well, the media queries in order to change an element style have to come later in the cascade. If you put the media query in the wrong place, it ain’t gonna do anything, right? And you also need to worry about the max width versus min width issue, okay? So a media query that comes after another media query is automatically going to take precedence.

0:29:00
You have to be very, very careful of how you’re ordering your media queries. Now, thankfully, if you’re just using the page builder styling, like we’re about to do in a second, not a problem because the page builder organizes this all for you. It writes the media queries for you. It injects everything in the media queries for you, all good to go. But if you are writing your own CSS, you have to be careful where the media queries are being placed in the cascade.

0:29:22
And this is why I’m such a fan of nested CSS, which is coming, okay, it’s not here yet, but it’s coming because they help you organize media queries way more efficiently, exactly the way that’s currently done in SAS. But that is over a bunch of people’s heads, so let’s move on. Okay, womp womp, we got a womp womp to talk about, my friends, tokens don’t work in media queries. I know what you were thinking. You are so smart, you are so absolutely smart.

0:29:50
You were thinking, Kevin, I don’t wanna remember what my media query values are, like with 767991, maybe they’re different on different sites, so I move from one site to another. How do I know what value I’m supposed to put in when I’m writing my media query, right? Like PopQuiz, that second to last media query right there, what’s the value of that? So if I want to target that media query that’s right above my cursor right here, and I want to go in here and write some CSS, I got to write at media, and then I got to write max width, and then you know what?

0:30:21
I’m like, what’s the value again? I don’t remember the value. So you got to go check and thankfully in bricks you can just hover and see it that’s not the case in all builders I see it 767 now I got to go 767 but here’s another problem guys I put in instructions here what if my breakpoints ever change what if I just decide to change them guess what all your media queries are broken they don’t reflect your new breakpoint values and so and this is probably what you already caught on to because you’re on top of it. You are a smart cookie, okay?

0:30:54
You’re like, Kevin, we gotta tokenize this. Well, you guys are all about tokenization now, which thankfully, I just, I love it. I absolutely love it. You’re right, you’re 100% right. We need to tokenize this. The problem is that’s the womp womp. You can’t tokenize media queries. You cannot put var breakpoint s or m or whatever. Variables don’t work in media queries.

0:31:19
I hate it. I absolutely, as much as you do, I hate it, okay? So what do we do? Well, for now, we be a chump. We act like a chump. We go chump life. That’s what we do. We just put 767. Or if you’re an automatic CSS user, you actually have a workaround for this.

0:31:38
Now, not in the builder, can’t do this in the builder, but in WP CodeBox, 100%, you can do this. So ACSS users can do stuff like this, at include breakpoint L. All you need to know is your token, and then you put all your styles in here, and what this at include does is it writes the media query for you, and it references the token value from automatic CSS, and then if your breakpoints ever need to change, guess what?

0:32:06
All of your breakpoints still work. They reflect your new breakpoint values automatically. So there are superpowers if you use a framework like automatic CSS, but if you use regular vanilla CSS, you gotta live the chump life until the CSS spec upgrades and allows us to use tokens in media queries. But that is a very big, I agree, a very big womp womp for vanilla CSS. Okay, I wanna talk about two things that are coming very soon, and then we are going to optimize our landing page for mobile.

0:32:39
You need to be aware of these things. They are coming very, very, very soon to full scope CSS, vanilla CSS, okay? So media range queries. So these are what range queries look like. And they basically allow you to write a media query a little bit easier and a little bit more contextually accurate and so on. So I can write at media, and then, so this is basically saying, if the width is less than 768, this is where the style is gonna take effect.

0:33:08
We can all understand this, right? There’s no more like max width, min width, yada, yada, yada, nonsense going on. It’s literally just width is less than 768 pixels. Or you can say width is less than or equal to 768 pixels. Or you can say width is greater than 768 pixels. And you can even do longer strings. Like if the width is less than 320 or greater than, or I’m sorry, the width is greater than 320. Sorry, I’m dyslexic.

0:33:39
Have I said that before? I’m dyslexic. Have I said that before? I’m dyslexic. The width is greater than 320 but less than 1280 pixels, then that’s where the styles are going to take effect, which is basically between 320 and 180. So this is coming soon. Do not use this yet. It will not work. Your sites will break, okay, but it is coming soon.

0:34:01
Another thing that is coming soon, which is going to be an absolute game changer, and it’s going to require another lesson in this series, is container queries. So right now, you can only target and change styles by device size. But what’s coming is you can change styles when a container itself gets to be a different width, which is very, very, very valuable, I believe, than a media query. And so this is going to be one of the biggest things coming to CSS in the last few years, in my estimation. So be on the lookout for that. And container queries are coming before media range queries, by the way. So just, yeah, keep an eye out for container queries.

0:34:45
They’ll be coming to ACSS. I’m really curious to see how builders are gonna handle container queries and create a usable workflow around them, but that’s gonna be very, very powerful stuff. Okay, let’s optimize our example page for mobile. So I’m gonna go over and hop into our example page. This is Messagely. This is the page we created in our previous lesson. This is our desktop breakpoint.

0:35:06
Everything looks nice and clean. You can see that this is one row. And what I’m gonna do here is I’m going to come down in 991 and see that it’s split to two row. How did that happen? Well, it is a flex row right here with a wrap of no wrap. If I go down to this break point right here, you can see that the wrap has changed to wrap. And I did that on the class right here, logo group. So I changed this to wrap and then I changed some alignment stuff here.

0:35:33
And then we come down and we can see that those changes still take effect there and they still take effect there and all as well in the world. What I also want to do is I want to change the height of these logos as well at some point. So if I click on a logo, you can see that I set a height of five rim. I said that this is one of the only times you want to use a fixed height on something. Now I come down and I say to myself, you know, five rims still looking pretty good there. I come down here and say, even right here, five rim is still looking pretty maybe 4 rem would be good here so I’m gonna make a little 4 rem change and then I’m gonna come down here and I’m gonna say all right you know there I’m thinking maybe like 3 rem is gonna be a little bit better that’s probably a little bit more suitable for a narrow phone kind of situation so that’s basically all there is to it you saw I just step my way down and I made a change from bottom to top.

0:36:27
Now could I put in a clamp function for that? Hey, a hundred percent. Absolutely. I absolutely could. You don’t really have to in this situation though. It’s just, it’s faster for me to go bam, bam, bam, make a little change. And by the way, I’m making them to the class, which means every single logo is being equally affected at the exact same time. I don’t have to like a chump go from logo to logo to logo to logo to logo to logo to for however many there are on this website. Now that would, I would never want to live that life. So I created a class. I made the change at the class and now every logo is affected. Okay.

0:37:03
But you can see an issue right here, can’t we? All right, so let’s look at our grid grid looks fine on desktop. I come down here, grid still looks pretty decent right there. But you know what? Right here things are obviously way too squished, so this has a class of grid 2 on it, and what we’re going to do is we’re going to abandon utility classes here because this is a situation where you would literally have to start writing your own utility class framework, right? And you don’t really want to be in the business of doing that.

0:37:35
So grid to establish your two column grid, but at this break point, what I’m gonna do is come in and I’m just gonna write a new grid. Well, actually we have a grid one, don’t we? I believe we have a grid one, which is a variable, not a utility class. And it’s gonna change this to a one column grid at that break point right there. Why? Because I have that break point selected and that’s where I made the change.

0:37:56
If I go up, it’s still gonna be two columns because I’m on a max width media query, which means it’s this break point and down. But look at this, this gap is out of control. The gap looks good on desktop and even pretty good right here. The gap’s way too big once this collapses to one column. So I now have to override my gap. So I’m gonna say var and we’re gonna use space m. Did we create it?

0:38:22
I believe we created a grid gap variable, didn’t we? There’s grid gap right there. Because on desktop, if we look at the gap it was Grid gap times 3 and by the way, I do not want that attached to that class. That is a horrible mistake Okay, let’s take that off and just do a grid gap right there All right, we’re gonna go ahead and hit save take a look take a look There it is nice stack to to one column now. This is looking absolutely Fantastic right here. I’m gonna scroll down and I’m gonna see, ooh, you know what? I don’t like the fact that this icon is positioned in the center when everything else is left aligned and clearly this grid has some squeeze issues here going on.

0:39:02
So let’s see what’s going on with this. So I’m gonna grab this icon, which is inside of a container. Ah, it’s inside a container. It’s grouped content. So what I can do is come down here and decide, ooh, look how that aligned there. No, I still want that centered there. Okay, so let’s go up and make sure everything is centered here.

0:39:21
We can align it to the cross axis, which is good, but we probably need to also center all of the text in here. So I come down and now we have centered text. I think we’re good here. I go to the next break point. This is where I probably want to start left aligning everything. So I’m gonna say text align left and I’m going to say align main axis or cross axis to the left. I don’t I actually don’t like this cross and main stuff going on in Bricks. I want my align items justify like because I’ve mapped these terms in my mind to specific things. I don’t think in terms of these labels and this is why you know builders do everything differently. If you open up oxygen, gonna have different labels, okay?

0:40:03
So it’s just, I like things that map directly to the CSS terms. All right, so I’ve aligned everything to the left here. What are we gonna do? And it’s gonna be left aligned basically all the way down from there. What are we gonna do about this grid? Where are we gonna break this grid? I still think it’s kind of fine right there, but definitely here, not good, not good whatsoever.

0:40:24
So let’s go at this break point and say, this is where we’re going to go var grid1. And now we have stacked these cards. Now, I would agree that these images are a little out of control, but we haven’t even styled our cards yet. This is going to, this is going to all take effect when we actually style our cards. I just want to make sure we don’t have squishy grids, right? So our grid is collapsing logically the way that it’s supposed to. And on this break point, it looks great. All right, I’m gonna come down. Oh, look at this.

0:40:54
We have centered text, and then we have left aligned text up here. I like to align everything left on mobile for the most part. So what I’m gonna do is when this aligns left, I’m gonna grab this class because watch all of these change at the same time. Align cross axis, style, typography, text align left. Look at that, they all update. Ain’t no chumps round here, my friends. Ain’t no chumps round here.

0:41:21
All right, so we’re gonna go back and align this, so that’s gonna be left aligned as well. And perfect. Now, would I still left align these logos? Probably not. Let’s go ahead and take a look at them. Left aligned. And let’s see what’s happening here. So we’ve got center, center, go ahead and align to the left. There we go. All right. Um, you could make an argument. I still think that these look good centered. So I’m going to go ahead and put these back the way that they were. And we’re going to leave that as like the only centered content right there. Okay, so I’m coming back down, down, down down down down oh look at this these did not look good at this break point they look decent right here but they definitely don’t look decent right here so what are we going to do we’re going to change the grid structure at this break point first by selecting the class why because I want to affect every single one of these cards and then I’m going to say you are var grid one now see how handy these tokens are right I don’t have to continue writing, you know, repeat functions and min max functions and all this other stuff.

0:42:32
I simply write the tokens. Now, you are gonna see here that there, because we’re flip-flopping content, and somebody actually brought this up in the comments of the lesson where we built these cards. Because if you remember, I made these automatically flip-flop back and forth. And someone’s like, but if you automatically make them flip-flop back and forth, they’re not gonna look good on mobile because what you’re gonna have is an image and then an image and then text and then text versus an image, text, image, text, image, text.

0:43:00
And guys, we haven’t styled these cards yet. Trust me when I say, would you, do you believe you’re gonna follow me off some sort of cliff? Some of y’all still don’t understand, this ain’t no hobby. You don’t think I have a solution for this that’s automatic. We just haven’t got there yet. We gotta style these cards up. And when we style these cards up, we’re gonna get there, I promise.

0:43:21
All right, let’s keep going down. I mean, to me, if I just align this left over here and make sure our text is aligned to the left in that box, I think we’re kind of golden here. I mean, and by the way, it took less effort to make this page mobile responsive because of so many of the other techniques that we’ve put into place. Fluid responsive typography, fluid responsive spacing, the tokenization of our styling, classes, very little work. It required very little work. Let’s take a look at how it looks. All good, all good. That’s when it breaks to one column. We’re gonna style these cards up so they look way better than this, don’t worry. But yeah, all looking good, all looking good now.

0:44:04
Coming down, this looks great. Good, good, good, good, good. We’re gonna fix these alignment issues with our what comes first and what comes last in our content order in a future lesson. This is done now. Nothing on this site is breaking. Nothing on this page is breaking at any breakpoint. Nothing is getting out of whack. We’ve done our job.

0:44:23
We’ve made the page mobile responsive. So let me go back to camera here that was your overview of media queries and breakpoints and responsive web development. We’ve still got a lot of styling stuff to do on this page and a lot more lessons to go so stay tuned absolutely make sure you’re doing your homework I want you to go in to that messagely page that you were supposed to create and go ahead and make it mobile responsive. Fix your breakpoints up however you want to fix them up and then go through and make sure that your grids are stacking, your content is getting realigned, everything that you want to happen at different breakpoints, go make that stuff happen. Use your classes so you’re not styling at the ID level like a chump and that’s that. If you have any questions drop the comments below, hit like on this video and I will see you again very very soon.