Summary:

Responsive Media Query in Dreamweaver

    ●   Add a Media Query to your style sheet to test for Screen Size.


Learn About:

@mediamin-height

  •   This tutorial is part of the Home Sweet Home Portfolio Project.

Step #1: Open your Work in Dreamweaver ~

Make sure your index page for this project is open.


Step #2: CSS ~

Open styles.css by going to: Window > CSS Styles and Double-Click your styles sheet.

open-styles-sheet.png

 

Step #3: Open your CSS document ~

Scroll down to the bottom of your CSS code and click in an open space.


Step #4: CSS Style ~

Copy the following code and paste it at the bottom of your style sheet


@media screen and (min-width: 320px) and (max-width: 480px) {

}

… like this.

 

 

 

This means that the codes between these brackets will activate whenever the page is viewed on a screen sized between 320 and 480 pixels, like an iPhone.

 

 

 

 

Step #5: Background ~

The first thing you may want is to change the background color and remove the background image:


Step #6: Container Width ~

Change the width of the container:


Step #7: Nav Button Size ~

Set your header and nav button size:


Step #8: iPad ~

Next you want to specify iPad sizes:


@media screen and (min-width: 481px) and (max-width: 768px) {

}

… like this.

 

 

 

These codes will activate whenever the page is viewed on a screen sized between 481 and 768 pixels, like an iPad.

 

Step #9: iPad ~

It is you're responsibility to find solutions to your layout problems and fix them:


Last Step: Save and Upload your site ~

Upload your site with the work you completed, attach the link to your site where the work is located …

… and continue working …