Firstly, we lost our gap and the center alignment. And secondly, for slightly larger screens below the breakpoint, you see, because our images are inline elements, we don't get what we expect. So let's go back and change this to flex-direction: column. So we're retaining display: flex, we're just changing the direction to column for smaller devices. This right here, this is not mobile-first approach, but I always like to follow that. What we can do instead is change the max-width to min-width. So all these styles will be for mobile and these will be for larger devices. So instead of adding flex-direction: column here, we'll have to add it here because these

So all these styles will be for mobile and these will be for larger devices. So instead of adding flex-direction: column here, we'll have to add it here because these are the mobile styles. And here we'll have to change it back to row. So row is the other value, the default. Let's check if we still have the same result. Yes, this is for smaller devices and for larger ones, we have them in a row. Great. While we're at it, let's see two more values that flex-direction offers. We've seen row and column.

And this is what we have to begin with. This right here is the section. All right, with the concepts you have learned so far, you know how to center a div. So one of the ways of achieving this layout is to wrap these two buttons within an additional div and center that div within the section. But assuming that we cannot change the markup right here by adding an additional div, or we don't want to add unnecessary markup, how do we vertically center both these buttons? Yes, you can use the column-direction in Flexbox. Let me show you. First, turn the section element into a flex container by adding display: flex;.

the name at the complete bottom, which we don't, and then the text, the paragraph in between. So we want the items to spread out completely, creating equal space in between. Can you try this out on your own? Let's look at the markup. Here's the div and we have three items, image, paragraph, and span. So first, we add display: flex to the testimonial div and then change the direction to column because we want the items to continue to stay one below the other. And now we want to space out the elements vertically, that is along the main axis. So the property we use is justify-content and the value we need is space-between.

And now we want to space out the elements vertically, that is along the main axis. So the property we use is justify-content and the value we need is space-between. Great. Now, what if we also want all these to be horizontally centered? We want to change the alignment in the horizontal direction, which is the cross axis. So we use align-items-center. We also need to center this text. So we can add p, p, text-align-center. This is now perfect. So we learned about flex directions and how to place and align items in different situations.