Responsive Media Query in Dreamweaver

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

Learn About:


  •   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.



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 …