From the course: CSS: Combining Grid and Flexbox
Unlock the full course today
Join today to access over 24,700 courses taught by industry experts.
Team section for desktops - CSS Tutorial
From the course: CSS: Combining Grid and Flexbox
Team section for desktops
- [Instructor] For our larger screen views, let's change things up a bit. We're going to rearrange the elements since we have more real estate. As I scale my browser up, you can see that the overlap on the images is still working great, but the header and the paragraph are taking up the full width. We're going to reorganize this so that they are going to appear in a multi column layout. Let me show you what I'm starting you with. If you go down into your CSS, you'll find the starting CSS that I've provided for you. All I have here is on the Team section. I'm giving it a max width of a thousand pixels so this area doesn't get too wide, and so the images don't get too big. We're using margin auto to center it and I have some padding. On the paragraph I'm adding a border on the right and some padding on the right as well. Let's add in our grid code so that we can have this display in the manner that we want. We're…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
(Locked)
Overview of the project2m 41s
-
(Locked)
Webpage header with hero section8m 30s
-
(Locked)
Create a hamburger menu for mobile7m 12s
-
(Locked)
Create a horizontal menu for desktops7m 52s
-
(Locked)
Web cards, part 15m 56s
-
(Locked)
Web cards, part 26m 56s
-
(Locked)
CTA summaries3m 29s
-
(Locked)
Team section for mobile8m 19s
-
(Locked)
Team section for desktops3m 44s
-
(Locked)
Problem section5m 24s
-
(Locked)
Media objects for mobile6m 59s
-
(Locked)
Media objects for desktop4m 48s
-
(Locked)
Picture gallery9m 45s
-
(Locked)
Footer for large screen7m 5s
-
(Locked)
Footer for extra large screens6m 4s
-
(Locked)
-
-
-