From the course: Creating a Responsive Web Design

Unlock this course with a free trial

Join today to access over 22,500 courses taught by industry experts.

Rearranging the main and atmosphere sections

Rearranging the main and atmosphere sections - CSS Tutorial

From the course: Creating a Responsive Web Design

Start my 1-month free trial Buy for my team

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…

Contents