Media Queries disappearing in DW CC

When I set up my site, I had 3 media queries listed one with a mid width of 481 and one with a min width of 769.
This is what is listed under the @media pane:
GLOBAL
@media only screen and (min-width:481px)
What happened to my larger-screen media query? How do I style things just for the larger screen now? If I dont have this option appear anymore, I am not sure how to add features just to the larger desktop version if I can't select it.
I also lost all media queries on the secondary style sheet I created. Does anyone have any advice on how I created this problem and how I can fix it?
Thank you for your help.

Media queries need to be wrapped inside a 2nd set of curly brackets.   They won't work without them.
/**MOBILE MEDIA QUERY**/
@media only screen and (max-width: 480px) {
      body {
          font-size: 80%;
Nancy O.

Similar Messages

Change the order of boxes in different media queries

How can I change the order of boxes in different media queries?
Is the only work around to copy one box to the other order position and switch the Display attribute in the different media queries?

Hi, thanks for your question. Reflow follows the rules of CSS and HTML. There is not a way to swap or move objects in the DOM without using something like Javascript. We've avoided that, and only focus on CSS and HTML with Reflow.
Yes, you can use multiple boxes in different places and change their display as needed. But I might caution against doing this as it may add work for both you and anyone else that may take this design and put it into production. I might take a look at why you want to move the boxes around, and maybe find a simpler or more efficient design pattern to follow to get a result you would be happy with. Hope that doesn't sound preachy, you should try it if you want and don't listen to me. Either way, let me know how it goes!

IPhone Not Recognizing Media Queries

http://www.sandiegohomegrown.com/testSDTG/
This is my first RWD site and is a work in progress. I have been testing it on emulators, google's "view responsive layouts", ipad, and it all works - albeit it's not done. I tried it finally on my iPhone and it seems to not be recognizing my media queries. I can dsplay:none in the media queries and it makes no difference. This has to be an easy fix! I have viewport set up and again it works on iPad just fine as well on desktops when you minimize the screen but on the actual iPad it shows a horrible version of the full site.
Thanks for taking a look at this!
Gary
PS: I will clean up the code - this is a work in progress.

I figured out a few things but not all. It seems to work on iPhone 5 but not with new Galaxy or my older iPhone. I can guess that the issue with the iPhone is similar to why it doesn't render correctly on my old iPad but works fine with my new one, but baffled why the Galaxy doesn't recognize the media queries and viewport. Will do some research on this but if anyone knows post it here!

Where is the mobile style sheet for media queries?

When I create a new document in Dreamweaver CC, I get the following @media queries:
GLOBAL
only screen and (min-width : 481px)
only screen and (min-width : 769px)
Where is the mobile style sheet?
I thought the fluid grid layout option in DW would create 3 screen sizes.
Do I have to create another special style sheet to only apply to the mobile version?
When I click on the mobile icon at the bottom of Dreamweaver's CC screen, I see the mobile page with the 4 column grid.
But how do I make changes to just one screen size, say mobile?
When I have the mobile view on my screen, and have GLOBAL @Media selected, the changes I make go across all screen sizes. I want some styling to only be applied to mobile. I don't understand how to do this. Could somone please claify if I am missing a @Media sheet and how to create it if needed. Thanks.

FGLayouts are built on the mobile first scheme. There's nothing you have to do.
Nancy O.

Media Queries: Works on Mac but not Windows

http://www.sandiegohomegrown.com/testSDTG/
I have been coding this site on my Mac and it works with Firefox, Safari, and Chrome. I fired up the old Windows machine and it doesn't work with Safari, Firefox, or IE10. It just ignores the media queries completely. This has to be something really simple but I am baffled. Help!! Gary

Alt attributes on images are not significant for rendering. Did you fix the duplicate ID problems? Those are important.
Windows OS doesn't ignore media queries but some browsers will if they see code errors they can't reconcile.
Make sure IE is NOT running in Compatibility Mode which is practically the same as IE7.
If you want to ensure IE always opens in standards mode, add this meta tag to the <head> of your HTML pages.

Nancy O.

Android Browser Landscape View Media Queries in Dreamweaver CS5.5

Hey Guys !!!!!
I Have a Problem
In regards to the media queries working on android browser. I Use Dreamweaver CS5.5. When I tested there was no change .
When I tested in landscape view it takes the default web browser screen width it is not device screen width.

HI
Thanks for your Kind Reply.
But there is No device Issue.
I m Using ONE HTML (ONE URL) For Web View and Mobile View. ( Multi Screen View Feature In Dreamweaver CS 5.5 )
It is look Fine in Multi Screen View Preview in Dreamweaver CS 5.5.
My media query is simple :
For Desktop :
<link href="style/desktop.css" rel="stylesheet" type="text/css">
For Mobile :
<link href="style/phone.css" rel="stylesheet" type="text/css" media="only screen and (max-width:320px)">
And My Meta Tag is :
<meta name="viewport" content="width=device-width">
when my phone device is in vertical position it is called the phone.css But When my phone device rotate in horizontal ( landscape View ) it is called desktop.css

Im trying to reorder divs when in the mobile version of my site, is it possible to do it with media queries?

Im trying to reorder divs when in the mobile version of my site, is it possible to do it with media queries? Here is the layout in desktop view, red being what would be images. And when i rescale, the content stacks together to place two of the same boxes together, like so;
Is it possible to apply a rule so when scaled the boxes reorder to show red, black, red, black, red, black?

<div class="productcontainer3">
<div class="product3"></div>
</div>
<div class="productcontainer4">
<div class="product4"><h6>Manta Soledo</h6><p1>In here will be the Manta blurb! Not too much technical info, save that for product page. Make it sleek and elegant. </p1></div>
</div>
<div class="productcontainer1">
<div class="product1"><h6>Manta Soledo</h6><p1> In here will be the Manta blurb! Not too much technical info, save that for product page. Make it sleek and elegant.</p1> </div>
</div>
<div class="productcontainer2">
<div class="product2"></div>
</div>
<div class="productcontainer5">
<div class="product5"></div>
</div>
<div class="productcontainer6">
<div class="product6"><h6>Manta Soledo</h6><p1>In here will be the Manta blurb! Not too much technical info, save that for product page. Make it sleek and elegant. </p1></div>
.productcontainer1 {
float: left;
clear: both;
max-width: 604px;
width: 49%;
margin-right: 1%;
margin-bottom: 4%;
margin-top: 1%;
@media all and (max-width: 600px) {
.productcontainer1 {
width: 100%;
.productcontainer2 {
float: left;
max-width: 604px;
width: 49%;
margin-bottom: 4%;
margin-top: 1%;
@media all and (max-width: 600px) {
.productcontainer2 {
width: 100%;
.productcontainer3 {
float: left;
clear: both;
max-width: 604px;
width: 49%;
margin-right: 1%;
margin-bottom: 4%;
@media all and (max-width: 600px) {
.productcontainer3 {
width: 100%;
.productcontainer4 {
float: left;
max-width: 604px;
width: 49%;
margin-bottom: 4%;
@media all and (max-width: 600px) {
.productcontainer4 {
width: 100%;
.productcontainer5 {
float: left;
clear: both;
max-width: 604px;
width: 49%;
margin-right: 1%;
@media all and (max-width: 600px) {
.productcontainer5 {
width: 100%;
.productcontainer6 {
float: left;
max-width: 604px;
width: 49%;
@media all and (max-width: 600px) {
.productcontainer6 {
width: 100%;
.product1 {
Width: 100%;
padding-bottom: 50%;
float: left;
background-position: center;
    background-size: cover;
    background-repeat: none;
.product2:hover {
background-image:url(../Graphics/iMod-rollover.jpg);
.product2 {
Width: 100%;
background-image:url(../Graphics/iModindex.jpg);
padding-bottom: 50%;
float: left;
background-position: center;
    background-size: cover;
    background-repeat: none;
-webkit-transition: background-image .8s ease-in-out;
-moz-transition: background-image .8s ease-in-out;
-ms-transition: background-image .8s ease-in-out;
-o-transition: background-image .8s ease-in-out;
transition: background-image .8s ease-in-out;
.product3 {
Width: 100%;
padding-bottom: 50%;
float: left;
background-position: center;
    background-size: cover;
    background-repeat: none;
background-image:url(../Graphics/Ilanoindex.jpg);
-webkit-transition: background-image .8s ease-in-out;
-moz-transition: background-image .8s ease-in-out;
-ms-transition: background-image .8s ease-in-out;
-o-transition: background-image .8s ease-in-out;
transition: background-image .8s ease-in-out;
.product4 {
Width: 100%;
padding-bottom: 50%;
float: left;
background-position: center;
    background-size: cover;
    background-repeat: none;
.product3:hover {
background-image:url(../Graphics/Ilano-rollover.jpg);
.product5 {
Width: 100%;
background-image:url(../Graphics/Soledoindex.jpg);
padding-bottom: 50%;
float: left;
background-position: center;
    background-size: cover;
    background-repeat: none;
-webkit-transition: background-image .8s ease-in-out;
-moz-transition: background-image .8s ease-in-out;
-ms-transition: background-image .8s ease-in-out;
-o-transition: background-image .8s ease-in-out;
transition: background-image .8s ease-in-out;
.product5:hover {
background-image: url(../Graphics/Soledorollover.jpg);
.product6 {
Width: 100%;
padding-bottom: 50%;
float: left;
background-position: center;
    background-size: cover;
    background-repeat: none;

Upgraded to v10 and now media queries aren't working.

I upgraded to version 10 and the media queries are not working on a new site I'm working on . They worked fine on 9.01 and still are working fine on another machine that has 9.01. But not in 10.0.
It doesn't matter if its a <link> Media query or a @media screen. They are not working!
I tried to reinstall and I'm getting the same result.

I have test my site and queries in all the browsers and Firefox is the only one acting up. It worked in v 9. It's like they are being ignored. Here's an example of a media query.
I'm testing by resizing the browser window and also by loading a site through an iframe.
@media screen and (max-width: 800px) {
body { background: #ddd; }
Can someone please get this fixed. Mobile designs rely heavily on css media queries.

"Add media queries" button disabled

Hi,
I've downloaded the pack and everything else seems to work fine, but when I enter in the multiscreen preview window, the add media queries button is disabled (the viewport sizes is active) and I can't find any other way to bring up the menu for the css selection based on screen width.
Am I missing something? Or is there some incompatibility when using the pack in English while having the main software in Spanish?
Thanks.

The HTML5 Pack should work fine with the Spanish version of DW. What OS are you using? What language is your OS (English, Spanish)?
There is a known issue where the Add Media Queries button is sometimes disabled if you are in Live View and the URL in the Browser Navigation toolbar Address field starts with "http://". If you close the file and then re-open it a few times, the Add Media Queries button should eventually become enabled. It's kind of a random problem.
Please let us know if this helps or not to enable the Add Media Queries button.
Thanks,
David Alcala
Dreamweaver QE

Can we have two media queries about width(both same) of display in phone-tablet-pc mode design

can we have two media queries about width(both same) of display in phone-tablet-pc mode design, one in css.file of template file and one in particular file embedded css style?

Yes.

I am using media queries and div will not centre on desktop version

Hi,
I am building a site for the first time using media queries. My problem is that I cannot get the header div (#layoutDiv1) to centre on the desktop version.
I have pasted my code below, am I missing something?
Any help would be great.
Thanks, Alex.
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
color: #FFF;
background-color: #000;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 90%;
display: block;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 100%;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 90%;
display: block;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 100%;
text-align: left;
#LayoutDiv1 {
width: 1000px;
padding: 20px;
margin-right: auto;
margin-left: auto;

Because you don't have max-width to constrain the responsive design attributes from the tablet and phone are also then applied to the desktop because they are true. Have you tried either setting a max-width or setting the clear and float to none in the desktop CSS?

Media queries in CS5

How can I get Media Queries in CS5 ? (I don't have 5.5) Is this possible ? I can't do any of the tutorials for Mobile Friendly web pages without it.
I also don't appear to have "Mobile Starters" in New Document > Page from Sample > Mobile Starters ?
Is there an extension so I can create mobile froendly css in dreamweaver CS5 ?

http://www.dmxzone.com/go/21759/dmxzone-bootstrap/

Media Queries and Orientation

Below is an example of a media query I created via the Media Queries window. I have placed this line of code (plus the preceding meta tag), on pages I specifically designed for viewing on mobile devices:
<meta name="Viewport" content="width=device-width" />
<link rel="stylesheet" media="screen and (max-width:480px)" href="/styles/mobile_480.css" />
Is it necessary to also address the orientation issue of these devices (portrait/landscape) in the code string, and, if so, what is the proper syntax for doing so? The Media Queries window only allows me to designate width and height, but no other parameters. Do these "other parameters" have to be manually coded?
I also want to add code later for tablet devices, which are also viewable in either orientation. This is my test run using media queries, so I am hoping I am doing all of this correctly. Gradually I am getting the hang of this. Thanks for anyone's insight.
PS: I am assuming that I have correctly written the code mentioned above. If not, where have I gone wrong?
Tks.

Below is an example of a media query I created via the Media Queries window. I have placed this line of code (plus the preceding meta tag), on pages I specifically designed for viewing on mobile devices:
<meta name="Viewport" content="width=device-width" />
<link rel="stylesheet" media="screen and (max-width:480px)" href="/styles/mobile_480.css" />
Is it necessary to also address the orientation issue of these devices (portrait/landscape) in the code string, and, if so, what is the proper syntax for doing so? The Media Queries window only allows me to designate width and height, but no other parameters. Do these "other parameters" have to be manually coded?
I also want to add code later for tablet devices, which are also viewable in either orientation. This is my test run using media queries, so I am hoping I am doing all of this correctly. Gradually I am getting the hang of this. Thanks for anyone's insight.
PS: I am assuming that I have correctly written the code mentioned above. If not, where have I gone wrong?
Tks.

Missing functions in DW CC - insert Spry and •Select Modify Media Queries.

In DW CC under the "insert" menu there should be "spry" not there
in Modify, there should be "media Queries" not there
Are these in a new place? can't fid this stuff

Pure CSS Drop-Menu
http://jsfiddle.net/NancyO/zN7fU/
CSS3 Dropdown Menus
http://www.red-team-design.com/css3-dropdown-menu
PVII's Pop-Menu Magic3 (commercial DW extension)
http://www.projectseven.com/products/menusystems/pmm3/index.htm
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
jQuery MegaMenu 2
http://www.geektantra.com/2010/05/jquery-megamenu-2/
jQuery MeanMenu (responsive on mobile)
http://www.meanthemes.com/plugins/meanmenu/
Nancy O.

Using media queries?

Ive designed the layout for my website and want to make it user friendly for other devices, desktop, tablet, ipad, mobiles (smartphones and iphones). Ive got the basic layout ready and thought this would be the best time to tackle the media queries before i start to add all the content. Im not sure if the layout i currently have is ready/suitable to apply the media queries to?
Appreciate any help.
This is the code, you can aslo view the page here - www.milesfunerals.com/index2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
          background-image: url(Images/Background.jpg);
</style>
<link href="style sheet.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</style>
<style type="text/css">
/* BeginOAWidget_Instance_2559022: #slideshow_2 */
                              #slideshow_2 {
          padding: 0px;
          margin-right: auto;
          margin-left: auto;
          height: 200px;
          width: 1000px;
          margin-top:0;
                              #slideshow_2 img, #slideshow_2 div {
                                  padding: 0px;
                                  background-color: #EEE;
                                        -webkit-border-radius: 0px;
                                        -moz-border-radius: 0px;
                                        border-radius: 0px;
                                  margin: 0;
                                        position: absolute;
/* EndOAWidget_Instance_2559022 */
</style>
<script type="text/xml">

</script>
</script>
<style type="text/css">

<style>
#pcm{display:none;}
ul.pureCssMenu ul{
          display:none;
ul.pureCssMenu li:hover>ul{
          display:block;
          height:auto;
ul.pureCssMenu ul{
          position: absolute;
          left:100%;
          top:-1px;
          padding-right: 0px;
ul.pureCssMenu ul ul{
          position: absolute;left:98%;top:-2px;
ul.pureCssMenu,ul.pureCssMenu ul {
          margin:0px;
          list-style:none;
          height: auto;
          padding-top: 0px;
          padding-right: 0px;
          padding-left: 0px;
          width: 350px;
          margin-top: 120px;
          margin-left: 8px;
          background-image:url(Images/button.jpg);
          background-repeat:no-repeat;
ul.pureCssMenu table {border-collapse:collapse
ul.pureCssMenu {
          display:block;
          zoom:1;
          _width:auto;
          float: left;
          z-index: 3;
ul.pureCssMenu ul{
          margin-top: 0px;
ul.pureCssMenu li{
          display:block;
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
          outline-style:none;
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
          display:block;
          zoom:1;
          border-color:#;
          text-align:left;
          text-decoration:none;
          padding-bottom:14px;
          padding-top:10px;
          padding-left:12px;
          text-decoration:none;
          cursor:default;
          font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
          font-size: 18px;
          font-weight: bold;
          color: #000;
          text-shadow: 1px 1px 1px #FFF;
          background-image:url(Images/button.jpg);
          background-repeat:no-repeat;
ul.pureCssMenu span{
          overflow:hidden;
ul.pureCssMenu ul li {
          float:none;
ul.pureCssMenu ul a {
          text-align:left;
          white-space:nowrap;
ul.pureCssMenu li.sep{
          text-align:left;
          padding:0px;
          line-height:0;
ul.pureCssMenu li.sep span{
          float:none;
          width:100%;
          height:3;
          display:inline-block;
ul.pureCssMenu li:hover{
          position:relative;
          z-index: 3;
ul.pureCssMenu li:hover>a{
          border-color:#;
          text-decoration:none;
          font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
ul.pureCssMenu li a:hover{
          position:relative;
          border-color:#;
          color: #956221;
          text-decoration:none;
          font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
          font-size: 18px;
          font-weight: bold;
ul.pureCssMenu li.dis a {
          color: #000000 !important;
ul.pureCssMenu img {
          border: none;
          float:left;
          _float:none;
          margin-right:4px;
ul.pureCssMenu ul img {
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover ul{
          display:block;
ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul,ul.pureCssMenu a:hover a:hover a:hover ul ul,ul.pureCssMenu a:hover a:hover a:hover a:hover ul ul,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover ul ul,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover ul ul{display:none}
ul.pureCssMenu span{
          display:block;
          background-image:url(Images/arrow_sub1.gif);
          background-repeat: no-repeat;
          background-position:right center;
          background-repeat: no-repeat;
   padding-right:15px;}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{
          background-image:url(Images/arrow_sub1.gif)
</style>

</head>
<body>
<LINK REL="SHORTCUT ICON" HREF="http://www.milesmemorials.com/favicon.ico">
<div class="#container">
<div id="bannerDiv" class="bannerStyle">
    <img src="Images/banner.jpg" width="1000" height="168" alt="banner"/>
     </div>
<div id="navbar" class="navbarRule">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html">Home</a></li>
      <li><a href="about-us.html">About us</a></li>
      <li><a href="why-us.html">Why choose us</a></li>
      <li><a href="contact.html">Contact us</a></li>
      <li><a href="request.html">Request a brochure</a></li>
    </ul>
</div>
<div id="slideshow2"><script type="text/javascript">
// BeginOAWidget_Instance_2559022: #slideshow_2
                           slideshow_2AddCaption=false;
$(document).ready(function() {
          $('#slideshow_2').cycle({
                    after:                              slideshow_2OnCycleAfter, //the function that is triggered after each transition
                    autostop:                              false,     // true to end slideshow after X transitions (where X == slide count)
                    fx:                                        'fade,',// name of transition effect
                    pause:                              false,     // true to enable pause on hover
                    randomizeEffects:          true, // valid when multiple effects are used; true to make the effect sequence random
                    speed:                              4000, // speed of the transition (any valid fx speed value)
                    sync:                              true,     // true if in/out transitions should occur simultaneously
                    timeout:                    3000, // milliseconds between slide transitions (0 to disable auto advance)
                    fit:                              false,
                    height:                       '200px',
                    width:         '1000px'   // container width (if the 'fit' option is true, the slides will be set to this width as well)
function slideshow_2OnCycleAfter() {
          if (slideshow_2AddCaption==true){
                              $('#slideshow_2-caption').html(this.title);
// EndOAWidget_Instance_2559022
</script>
    <div id="slideshow_2">
      
     <img src="Images/ssimage1.jpg" width="1000" height="200" alt="image1" /><img src="Images/ssimage2.jpg" width="1000" height="200" alt="image2" /><img src="Images/ssimage3.jpg" width="1000" height="200" alt="image3" />
    </div>
    <div id="mainContent" class="mainText">
      <h1>A memory is a lasting tribute that acknowledged the life of your loved one ...let us help you to design a memorial that is every bit as special as that person. </h1>
      <ul class="pureCssMenu pureCssMenum">
        <li><a href="cemetery-memorials.html">Churchyard memorials<![if gt IE 6]></a></li>
            <li><a href="">Churchyard memorials<![if gt IE 6]></a></li>
            <li><a href="">Cremation memorials<![if gt IE 6]></a></li>
       <li><a href="" ><span>Vases</span><![if gt IE 6]></a><![endif]>
          <ul>
            <li><a href="">Italian marble vases</a></li>
            <li><a href="">Granite vases</a></li>
          </ul>
        </li>
        <li><a href="" ><span>Colour guides</span><![if gt IE 6]></a><![endif]>
          <ul>
            <li><a href="">Italian marble & churchyard memorial</a></li>
            <li><a href="">Granite colour guide</a></li>
          </ul>
        </li>
        <li><a href="" >Home & garden memorials</a></li>
        <li><a href="">Inscription & vases</a></li>
        <li><a href="">Engraved designs</a></li>
        <li><a href="" >Sand blasted designs</a></li>
        <li><a href="" >Photos,plaques,etc</a></li>
        <li><a href="">Italian marble figurines</a></li>
        <li><a href="" >Bronze figurines & accessories</a></li>
        <li><a href="" >Memorial garden plaques</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
</body>
</html>

So i have inserted several media queries to my page and this is what appears at the top of the code -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Home page</title>
<style type="text/css">
body {
          background-image: url(Images/Background.jpg);
</style>
<link href="style sheet.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<link href="desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:1224px)" />

<link href="smartphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width:320px) and (max-width:480px)" />

<link href="ipad.css" rel="stylesheet" type="text/css" media="only screen and (min-width:760px) and (max-width:1024px)" />

<link href="iphone.css" rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)" />
</style>
I now want to apply the style rules to each of the files (desktop.css, smartphone.css, ipad.css, iphone.css). I just dont know where to start with this as im still new to dreamweaver.
www.milesmemorials.com/index2.html

Media Queries disappearing in DW CC

Similar Messages

Maybe you are looking for