From the course: CSS: Combining Grid and Flexbox
Unlock the full course today
Join today to access over 24,400 courses taught by industry experts.
Problem section - CSS Tutorial
From the course: CSS: Combining Grid and Flexbox
Problem section
- [Instructor] Up next on our website is the problem section. At the small version of the website, everything is working the way we want. We have a headline, a paragraph, an H3, an unordered list, and then we're displaying an image. As the page expands and gets wider, the layout is going to change. We're actually going to swap out the image with this illustration that is going to serve as a background. We're moving the H1 to the left and then having the paragraph that immediately follows it appear to the right. Then on the right side, we'll list our H3 and our unordered list. I'm going to start you off with the CSS for the small screen. And as I mentioned, there's really nothing to do here. But as my screen gets larger, you can see that our layout gets a little bit wonky. So we'll have to make some adjustments in order to reign these items in and have them display in the way that we want. Let me introduce…
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)
-
-
-