From the course: Creating a Responsive Web Design
Unlock this course with a free trial
Join today to access over 22,600 courses taught by industry experts.
Rearranging the main and atmosphere sections - CSS Tutorial
From the course: Creating a Responsive Web Design
Rearranging the main and atmosphere sections
- So now we're going to need to make some changes to the main section because having three columns is going to get much more difficult as our browser width gets smaller. So if I come in here and decrease the browser width, it starts to get more difficult to read these columns. So what we're going to do is target the aside elements inside of section main and rearrange these to stack vertically. We'll also make a few adjustments to the atmosphere section as well. So let's go back to our CSS. We're still inside of the media query for 625. Let's come in here. Let's add a CSS comment. We'll call this section main. Then the first rule, we're going to type section.main space aside. We're going to target the aside element. I'll just space some of this out a little bit. So for each aside, we're going to come in here and change the width property. We're going to change the width to 100%. We're going to go into the float property and we're going to set this to none. So now these items won't…
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
-
-
-
-
-
-
-
Moving the navigation for smaller screens4m 4s
-
(Locked)
Adjusting to the logo and hero elements3m 46s
-
(Locked)
Rearranging the main and atmosphere sections4m 26s
-
(Locked)
Rearranging the how-to section5m 24s
-
(Locked)
Rearranging the navigation6m 7s
-
(Locked)
Adjusting the spacing of the navigation and footer3m 54s
-
-
-
-