Skip to content

9-5-pursuit/lab-css-media-queries

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Media Queries Lab

TekNews has a great looking website but it was only built for the desktop! Update the website so it can look good on any device.

Wide default view


Lab Setup

Getting started

  1. Fork and clone this repository.

  2. Navigate to the cloned repository's directory on your command line. Then, run the following command:

    npm install
    

    This will install the libraries needed to run the tests.

  3. Open up the repository in VSCode. Follow the instructions below to complete the Lab.

Tests

To run the tests, you can run the following command from the command line. You will need to be in the root directory of your local directory.

npm test

This will open the Cypress testing window, where you can click to run an individual suite of tests or all of the tests at once.

Instructions

To complete the tests in this lab, you will need to overwrite some styles depending on the width of the screen. If you're unclear about any of the instructions below, remember that you can check the test file to see what exactly is being tested.

768px to 1279px

  • Hide the .splash section by changing the display property to none.
  • Set the width of the main element to be 90%.
  • Update the footer element so that instead of three columns it is set to have two.

Medium view

Less than 768px

  • Update the header element so that instead of two columns it is set to have one.
  • Update the main element so that instead of two columns it is set to have one.
  • Change the gap on the main element so that it has a gap between each row of 50px. The gap between columns should be 0.
  • Update the footer element so it has a padding of 25px all around.
  • Update the footer element so that all of the text inside of it is aligned to the center.
  • Update the footer unordered list elements so that none of them have a list-style.
  • Update the footer heading so that it no longer has a border along the bottom.

Narrow view

Submission and Grading

You will host the results of this lab on GitHub Pages (please see the guide to hosting on GitHub pages for detailed instructions).

You need to edit this file to include the link for your instructors.

ADD link to your GitHub Pages Here

Your instructor will us a combination of reading your code and viewing the results of your code to determine a grade.

Releases

No releases published

Packages

No packages published