Homework 2 Responsive Websites with Flexbox Solution

Assignment Objectives

The goal of this assignment is to sharpen your skills with CSS3, specifically responsive design and flexbox. In this

assignment, you will only be writing CSS, the HTML is provided for you. Using media queries, your website’s

style will respond differently based on the page’s width. This assignment is to be completed individually, you are

permitted (and encouraged) to use online resources like Mozilla’s MDN. In addition, it is recommended to complete

some challenges on Flexbox Froggy to learn the basics of Flexbox.

If done properly, your CSS should result in the following views:

Desktop

1Left: Tablet, Right: Phone

2

Setup

For this assignment, you will be editing one file, solution.css, which is linked to page.html. If you open

index.html, it will show three frames of page.html with different widths for desktop, tablet and mobile views

to assist you with responsive development. You must not edit these html files.

3

General CSS

The first part of the assignment is to create the general properties that will be used with commonly with all widths

of your webpage. Style the following elements as directed:

• body

– Background color of #eee

• header

– Background color of #49516f

– Must have a flexbox layout

– Have items aligned to center

– Padding of 20px top and bottom

• header h1

– Margin of 0 on all sides

– Text color of white

• header span

– Margin of 0 on all sides

2– Text color of white

• .logo class

– Padding of 5px on all sides

– Margin of 10px on all sides

– Height and Width of 100px

– Border of 5px width, solid type and white color

• .posts class

– Must have a flexbox layout

– Flex elements must wrap into multiple lines

• .post class

– Must automatically grow to flex parent (Hint: MDN Link)

• .post-body class

– Height of 200px

• .post-body class

– Height of 200px

• .post-container class

– Margin of 10px on all sides

– Padding of 10px on all sides

– White background color

– Must have a flexbox layout

– Have items aligned to center

• .post-pic class

– Height and Width of 200px

– Right margin of 10px

3.1

Responsive View I: Desktop

This will be your first media query that you create in your solution.css file. This media query should match the

media where the minimum width is 999px. These are the properties that the query will overwrite:

• .posts class

– Set the direction of the flexbox to column

– Align the items of the flexbox to center

• .post class

– Set the maximum width to 800px

– Set the element to automatically flex to it’s parent

•

If done correctly, you should see that elements in the header are centered and the posts will grow to a maximum

of 800px:

33.2

Responsive View II: Tablet

Your second media query will be for the Tablet view that match the maximum width of 998px and a minimum

width of 400px. Here are the properties:

• header

– Justify the content of the flexbox to center

• .posts class

– Set the direction of the flexbox to row

– The flexbox must wrap elements

• .post-container class

– Have the flex direction to a column

• .post class

– Have the element flex to 50% of the parent

• .post-pic class

– Width of 100%

– Height of auto

If implemented correctly, your tablet view should resemble the following:

43.3

Responsive View III: Phone

Your last media query will be for the Phone view that match the maximum width of 399px. Here are the properties:

• header

– Have the flex direction to a column

– Align text to the center (Hint: you don’t need flex for this one)

• .logo class

– Have the border radius be 50%

• .posts class

– Must have an automatic flex basis

–

– Have the flex direction to a column

• .post-container class

– Have the flex direction switch to a column

• .post-pic class

– Width of 100%

– Height of auto

The correct style for your phone view should resemble the following:

54

Submission

Upload your solution.css file to Canvas as LastName_FirstName_Assignment2.css.

Good Luck!