From the course: Responsive Layout

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Solution: Floats to flexbox

Solution: Floats to flexbox - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

Solution: Floats to flexbox

“

(jingle) - [Instructor] For this challenge, your job was to take a fixed width website that was laid out using floats, and write new CSS to create a responsive website using flexbox. The first thing we're gonna do is open the file again in a separate browser tap. This way, we have our working page, but we can also load back and look at the original if we need to remember what it looks like. Next, we're going to go into the CSS that's in our HTML file starting with line nine and delete all of the CSS, because we're not going to need any of it. So, I've deleted everything between the two style tags right here. Normally, when we're laying out a webpage, we would start from the narrow layout first, as it's usually easier, but for this, since we're recreating an existing layout for the wide viewports, we're going to start with that one first. So, I'm going to save, and then go here and refresh. So now, I don't have any layout styles on the page. Looking at the page, it seems like the best…

Contents