CSS Layout

in order to create a three column layout, we can use the CSS Flexbot layout module, it is made out of a flex container, flex items within that container

I’ll show the coding and the results below:

Adding in the flex code

Adding in the thirds class, what is cool about this is that It is responsive and will change the scale of the item one/two to always be 1/3 or 2/3s of the page when the page is scaled narrower

We then used this in our html to create this layout

HTML code

CSS Code

Responsive Design

creating a web page that will scale to every type of screen whether that is a tv, monitor, billboard or any form of screen it will adjust appropriately about that

There are too many screen sizes to create a design for each

Breakpoints

a breakpoint defines a screen size where the design should adjust to a different layout

Common Breakpoints