Computer Science 318

Fundamentals of Web Design

Lab 07 Display Flex & Media Queries



CSS Flexbox

Flexbox is a dynamic alternative to display inline-block, that allows flex-elements within a flex-container to be arranged in either rows or columns based on flex properties.

Display flex diagram

Flex-Container Properties



This defines a flex container. It enables a flex context for all its direct children(flex-items).



This defines the main-axis of the flex container in which the flex-items will arrange themselves.

Values for flex-direction:

Flex direction diagram



This defines whether the flex-items will be contained on one line or be allowed to wrap on to new lines.

Values for flex-wrap:

Flex-wrap diagram

    flex-flow:column wrap;


This is a shorthand property for both flex-direction and flex-wrap.



This defines the alignment of the flex-items along the main axis.

Values for justify-content:




This defines how flex-items are aligned on the cross axis of the flex-container on the current line.

Values for align-items:



This defines how flex-items are aligned on the cross axis of the flex-container when there is extra space.
*Note this property will only work if flex-wrap:wrap; or flex-wrap:wrap-reverse; is used.

Values for align-content:

Flex align-content diagram

Media Queries

Media queries are used to apply conditional CSS styles. We will be using them to specify what happens when the devices screen size exceeds certain sizes.

@media (min-width: 1200px){
       width: 70%;

In the example:

The main has a width of 50% and the h1 has a margin of 2 rem. Except when the screen size is bigger that 1200 pixels, then the main has a width of 70% and h1 has a margin of 1 rem.

Notice how the main and h1 are inside the @media ruleset. When a ruleset is inside the media query ruleset then it is conditionally applied when the condition is met.

Mobile First

For the rest of the semester we will be practicing mobile first CSS. This means when you are writing your CSS it will be for narrow screens. Then you will use a media query to adjust elements for wider screens.


Scalable Vector Graphics is an XML-based markup language for describing two dimensional based vector graphics. SVG is essentially to graphics what HTML is to text.

What makes SVG powerful in terms of web design is the fact the image is made of vectors instead of pixels, therefore it can be scaled to any size with out losing quality. Also because SVG are lines of code, they are tiny files that require little load time. SVGs are ideal for logos and icons on websites.

Vector graphics are made of points connected by lines to form polygons and other shapes. Adobe Illustrator is a graphic software designed for creating vector graphics.

Example of SVG code:


<svg xmlns="" viewBox="0 0 461 406"> <title>svg-example</title> <rect width="248" height="248"/> <polygon points="248 406 0 406 124 158 248 406" style="fill:red"/> <circle cx="331" cy="225" r="130" style="fill:lime"/> </svg>



Experiment Try adding flex-direction to the .flex-container using the four different flex-direction values to see how the items will arrange in the flex-container. Possible values: row(default), row-reverse, column, column-reverse


<div class="flex-container"> <p>Item 1</p> <p>Item 2</p> <p>Item 3</p> </div>


body{ background-color:black; } .flex-container{ background-color:white; display:flex; } p{ background-color:green; padding:1rem; margin:1rem; }


Experiment In the demo below add flex-wrap to allow the element to flow on to a new line. Now try different justify-content values. Then add a height 20rem to the flex-container and try different align-content values to see how they work.


<div class="flex-container"> <p>Excepteur</p> <p>Dolor</p> <p>Reprehenderit</p> <p>Qui</p> <p>Commodo</p> <p>Proident</p> </div>


body{ background-color:black; } .flex-container{ background-color:white; display:flex; } p{ background-color:green; padding:1rem; margin:1rem; }


Experiment Add a red background color to the paragraph in the media query. Then resize your browser window until you can see the changes happening.


<h1>Media Queries</h1> <p>Lorem ipsum dolor.</p>


body{ background-color:darkblue; } h1{ color:red; } p{ background-color:yellow; } @media (min-width:400px){ h1{ color:yellow; } }


Successfully complete Flexbox Froggy. Take a screenshot of the completion page and save in lab 7 folder.

Open GitHub Desktop (you may need to download the program again if the computers get wiped.)

Couple of things to check in GitHub Desktop.

With your cs-318 repository selected, Click open in Visual Studio code.

Create a new folder called lab7

Create a new file called index.html in the lab7 folder

Setup your HTML files

Create your stylesheet

Link your stylesheet to the HTML

Change Document in the <title> element to "Tree Photography"

In the <body> add a <header> and <main>

In the <main> add two <section>

In the <header> add a <h1> with the content "Tree Photography"

Using the image below, recreate the logo as close as possible in Adobe Illustrator. Tutorial to create the logo in Adobe Illustrator.
The logo was creating using the rounded rectangle tool, circle tool, text tool, and shapes mode. You could also recreate it using just the pen tool. Note the logo is made up of black shapes, there are NO WHITE SHAPES in the logo. Font used was Helvetica bold, but any san-serif font should work. Make sure to save your logo as an Illustrator file (ai), in case you need to go back and make edits.

Tree Photography logo

How to save the logo as an SVG

SVG export

Create an images folder

Add the svg to the images folder

After the <h1> add the svg with an <img>

Add a <nav> in the <header>

Add two <a> with the following content but leave the href blank for now.

In the first <section> add a <h2> with the content "About Me"

Add an ID attribute to the <h2> with the value "aboutme"

Add a <div> in the first <section> after the <h2>

Add two <p> in the <div> with the following content

Add a class attribute to the first <section> with the value "about-me"

In the second <section> add a <h2> with the content "Gallery"

Add an ID attribute to the <h2> with the value "gallery"

In the <a> in the navigation add the following values to the href

Add the following images into your images folder

In the second <section> add all of the images with <img>.
Don't forget the alt="" with a description of the image

Add a class to the second <section> with the value "gallery"

Lab 7 content


Make your screen narrow, about 500px wide.

margin 0

font-family Verdana, Geneva, Tahoma, sans-serif

color #fff

background-color rgb(64, 73, 61)

Lab 7 body styles

Download the following image into the images folder



Add the new image as a background-image

background-size cover

background-repeat no-repeat

background-position center

Lab 7 header background image


display none.
This doesn't need to display because we have the logo, but we want the browser to be able to read the <h1> for SEO reasons


width 23rem

max-width 100%


padding 1rem


background color rgb(245, 245, 245)

color rgb(15, 15, 45)

text-decoration none

padding 1rem 2rem.
Hint: Two values with padding is: top&bottom | left&right

display inline-block.
Hint: <a> are inline by default which ignores margin on the top and bottom which is the reason the links are overlapping. We change it to inline-block to fix this.

margin 1rem


background-color rgb(200, 200, 205)


display flex

flex-wrap wrap

Use justify-content to get the logo and nav in the positions shown in the image below.
Hint: You might need to add the next ruleset to get justify-content to work, because of your browser width.

Lab 7 header flexbox


flex-basis 100%

text-align center


padding 1rem

main img

max-width 100%

margin .5rem 0

Download the following image

Lab 7 me

.about-me h2

Add the image above using background-image

background-size cover

padding 10rem 0 10rem 4rem.
Hint: When using four values with padding it is the following: top | right | bottom | left

text-shadow 2px 2px 2px #0000008f.
Hint: Text-shadow is a property used to define a drop shadow on text. The values are the following: offset-x | offset-y | blur-radius | color

.gallery h2

background-color rgb(245, 245, 245)

color rgb(15, 15, 46)

padding 2rem 4rem

Lab 7 mobile size css
Mobile styles are complete

Desktop CSS

When testing different screen sizes, I found that the web page started having some issues at about 1100px.

Add @media (min-width:1100px){} to the end of your CSS document

From here on you will add the CSS inside the curly brackets of the media query


flex-basis unset


flex-wrap nowrap

Use justify-content and align-items to achieve the positions in the picture below.

Lab 7 desktop header styles


display flex

.about-me h2

flex-basis 40%

background-position center

.about-me div

flex-basis 50%

margin-left 2rem


padding-left 4rem

Lab 7 about me desktop styles


display flex

flex-flow column wrap

max-height 78rem.

.gallery h2

margin .5rem

.gallery img

width 32%

margin .5rem

Now when I tested my gallery on different browser sizes I noticed that I had four columns at 1500px so let's add another media query.

Add @media (min-width:1500px){} at the end of the CSS document


max-height 120rem

Again when I tested my gallery on different browser sizes I noticed that I had four columns now at 2300px so let's one more media query.

Add @media (min-width:2300px){} at the end of the CSS document


max-height 150rem

Lab 7 final desktop css

Final Steps

Validate your HTML.

Lint your CSS at

Now look at GitHub Desktop. You should see all of your files listed out in the left column.

GitHub Desktop files listed

Now you are going to commit your changes.

With all of the files checked. Fill out the Summary field in the bottom left and then click Commit to main.
Committing is staging the files, so they can be pushed to the repository hosted at GitHub.

GitHub Desktop Summary field.

Now you want to push your changes to the Repository. Now if you access the repository from another computer Lab7 will be there. After you push in the top right of the nav it should say "Fetch Origin" instead of "Push Origin"

GitHub Push Origin

Your are Done with Lab7

Are you someone who needs to double check that it worked? If you want to make sure the push was successful click on the "View on GitHub" button from GitHub Desktop. It will open up your repository in the browser. From there you should be able to see all of your files.

...What if I need to make a change after pushing?

So let's say you have already pushed but noticed an error. No worries, this is easy to fix.

In visual studio code make any changes you need to. Once you are done making corrections. Save.

Go back to GitHub Desktop. You should see your changes to the documents listed there.

GitHub fixing an error.

Fill out the Summary field again. I suggest saying what you fixed. For example: "Fixed paragraph error on Sea-Jellies"

Click "Commit to main"

Click "Push Origin" and you are done.