From the course: Practice It: CSS Layout

Unlock the full course today

Join today to access over 24,700 courses taught by industry experts.

Changing the layout

Changing the layout - CSS Tutorial

From the course: Practice It: CSS Layout

Start my 1-month free trial Buy for my team

Changing the layout

“

- [Instructor] Let's dive a little bit deeper into responsive layout and mobile-first design now. Let's return to our mobile layout. So since we have a narrow screen and everything is stacked in one column, this is a pretty common layout for mobile devices. Since we've added this image and our main area now has two elements, let's center these elements on the page using flexbox. So I'll go in our CSS down to item three, and I'm going to give it a display of flex, a flex direction of column, and let's align items center and also justify the content center. Let's check it out. So now our image has moved to the center of the page, and this gives us a little bit more of a balanced layout. And our text is also going to remain on the center of the page as we expand a bit. So our layout for small screens is looking pretty good now. Let's see how it looks at about 600 pixels here. I think this is a pretty good breakpoint to…

Contents