Site Media Queries in Dreamweaver CS 5.5

I need some insight on creating site media queries in Dreamweaver CS 5.5.
With there being so many different tablets and smartphones, how many different .css files do I need so my website renders properly on all smartphones and tablets?

Responsive web design requires a re-build. 
Responsive Web Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
You can either build the layouts yourself manually.  Or, if you have a Creative Cloud subscription, you could use FGLayouts in CS6 or CC or use Adobe Edge Reflow and import it into DW.
Fluid Grid Layouts in CS6
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs-using-fluid-grid-la youts-in-dreamweaver-cs6/
Adobe Edge Reflow
http://tv.adobe.com/watch/adobe-edge-reflow/introduction-to-reflow/
Or, you could use any of the freely available Responsive Frameworks below.
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's FREE Bootstrap Extension for DW
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Nancy O.

Similar Messages

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

  • Dreamweaver CC How to edit styles across media queries and sizes

    I am creating a fulid grid/responsive website, using the standard Media queries offered by Dreamweaver CC when I start a new document.
    I have creative several DIVs to sturcture my page.
    I don't understand how to apply changes between the various media queries.
    Frist, I see you can drag the width of the boxes to adust how wide you want the portions to be. That I get. But what I don't understand is to apply different formatting/styles in the different screen sizes. There used to be a box that would pop up when you wanted to create a new class. Now I can't figure out which version of the screen to work in and how to make changes ONLY to one screen size.
    Here's an example of what I want to do:
    The main portion of my website has 4 categories, that I would like the user to be able to choose from to click on.
    On the mobile view, I want the image align left, text to the right of that, aligned left, and for the  background of each category to be the same color so that it looks like one big button on mobile.
    On tablet and desktop view, I want the image centered within the DIV, then the text centered under each image. I want the graphic image (which is in a circle) to stand out on a white background.
    In the tablet view, I have it organized by 2 rows and 2 columns.
    In the tablet view, I have it organized by 1 row and 4 columns.
    I hope this make sense.
    How do I signifyand create these changes? I have tried entering it in the code. That just seems to center it every image in every DIV (remember I want it aligned left in mobile) Or I tired entering it on the code in another way and that centered the image across the whole page, not just the DIV. HOw do I work around these problems? Do I need to make them all a class instead of a DIV? I am really confused....
    Please be nice as I am obviously a bit of a beginner and struggling with this basic concept. I appreciate any guidance or help that anyone has to offer.

    #1 Build mobile first.  Everything else is based on that primary layout.  Don't worry so much about content yet.  Just get your mobile layout in order.  Then build tablet and finally desktop.
    #2 Do not tamper with code in your FluidGrid.css or Boilerplate.css files.  These files are temperamental.  Use a separate external style sheet for your content styles.   That way if you do something wrong, it won't break the whole layout.
    #3 Keep your layout structure simple and uncomplicated.  No tables, no positioned elements.
    #4 Everything needs to be inside the <gridContainer> div.  If it's not, it won't be responsive.
    Nancy O.

  • Help on css files for multiple platforms from media queries.

    I am trying to make a new site friendly to bith the tablet and smart phone users.  My media queries program requires me to attach new css files for each new platform.  When I design these new css files do I simply go to the box and limit the width?  Is there something else I need to do?

    If you're using the Media Queries panel in Dreamweaver, then yes. You just specify the .css file, and enter in the min and/or max width for each range of screen sizes.
    It will insert code that looks something like:
    <link href="tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width:481px)">

  • 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.
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <![endif]-->
    Nancy O.

  • 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

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

  • 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"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
    <title>Untitled Document</title>
    <style type="text/css"&gt;
    body {
              background-image: url(Images/Background.jpg);
    </style>
    <link href="style sheet.css" rel="stylesheet" type="text/css" /&gt;
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"&gt;</script&gt;
    <script src="scripts/jquery-1.6.min.js" type="text/javascript"&gt;</script&gt;
    <script src="scripts/jquery.cycle.all.js" type="text/javascript"&gt;</script&gt;
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" /&gt;
    </style>
    <style type="text/css"&gt;
    /* 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"&gt;
    <!--
    <oa:widgets&gt;
      <oa:widget wid="2559022" binding="#slideshow_2" /&gt;
    </oa:widgets&gt;
    -->
    </script>
    </script>
    <style type="text/css"&gt;
    <!-- Start PureCSSMenu.com STYLE --&gt;
    <style>
    #pcm{display:none;}
    ul.pureCssMenu ul{
              display:none;
    ul.pureCssMenu li:hover&gt;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&gt;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 &gt; a img.def  {display:none}
    ul.pureCssMenu li:hover &gt; 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>
    <!-- End PureCSSMenu.com STYLE --&gt;
    </head>
    <body>
    <LINK REL="SHORTCUT ICON" HREF="http://www.milesmemorials.com/favicon.ico"&gt;
    <div class="#container">
    <div id="bannerDiv" class="bannerStyle"&gt;
        <img src="Images/banner.jpg" width="1000" height="168" alt="banner"/&gt;
         </div>
      <div id="navbar" class="navbarRule"&gt;
        <ul id="MenuBar1" class="MenuBarHorizontal"&gt;
          <li&gt;<a href="index.html"&gt;Home</a&gt;</li&gt;
          <li&gt;<a href="about-us.html"&gt;About us</a&gt;</li&gt;
          <li&gt;<a href="why-us.html"&gt;Why choose us</a&gt;</li&gt;
          <li&gt;<a href="contact.html"&gt;Contact us</a&gt;</li&gt;
          <li&gt;<a href="request.html"&gt;Request a brochure</a&gt;</li&gt;
        </ul&gt;
      </div>
      <div id="slideshow2"&gt;<script type="text/javascript"&gt;
    // 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"&gt;
          <!--All elements inside this will become slides-->
         <img src="Images/ssimage1.jpg" width="1000" height="200" alt="image1" /&gt;<img src="Images/ssimage2.jpg" width="1000" height="200" alt="image2" /&gt;<img src="Images/ssimage3.jpg" width="1000" height="200" alt="image3" /&gt;
        </div>
        <div id="mainContent" class="mainText"&gt;
          <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"&gt;
            <li&gt;<a  href="cemetery-memorials.html"&gt;Churchyard memorials<![if gt IE 6]&gt;</a&gt;</li&gt;
                <li&gt;<a href=""&gt;Churchyard memorials<![if gt IE 6]&gt;</a&gt;</li&gt;
                <li&gt;<a  href=""&gt;Cremation memorials<![if gt IE 6]&gt;</a&gt;</li&gt;
           <li&gt;<a  href="" &gt;<span&gt;Vases</span&gt;<![if gt IE 6]&gt;</a&gt;<![endif]&gt;<!--[if lte IE 6]&gt;<table&gt;<tr&gt;<td&gt;<![endif]--&gt;
              <ul&gt;
                <li&gt;<a  href=""&gt;Italian marble vases</a&gt;</li&gt;
                <li&gt;<a  href=""&gt;Granite vases</a&gt;</li&gt;
              </ul&gt;
            <!--[if lte IE 6]&gt;</td&gt;</tr&gt;</table&gt;</a&gt;<![endif]--&gt;</li&gt;
            <li&gt;<a  href="" &gt;<span&gt;Colour guides</span&gt;<![if gt IE 6]&gt;</a&gt;<![endif]&gt;<!--[if lte IE 6]&gt;<table&gt;<tr&gt;<td&gt;<![endif]--&gt;
              <ul&gt;
                <li&gt;<a  href=""&gt;Italian marble & churchyard memorial</a&gt;</li&gt;
                <li&gt;<a  href=""&gt;Granite colour guide</a&gt;</li&gt;
              </ul&gt;
            <!--[if lte IE 6]&gt;</td&gt;</tr&gt;</table&gt;</a&gt;<![endif]--&gt;</li&gt;
            <li&gt;<a  href="" &gt;Home & garden memorials</a&gt;</li&gt;
            <li&gt;<a  href=""&gt;Inscription & vases</a&gt;</li&gt;
            <li&gt;<a  href=""&gt;Engraved designs</a&gt;</li&gt;
            <li&gt;<a  href="" &gt;Sand blasted designs</a&gt;</li&gt;
            <li&gt;<a  href="" &gt;Photos,plaques,etc</a&gt;</li&gt;
            <li&gt;<a  href=""&gt;Italian marble figurines</a&gt;</li&gt;
            <li&gt;<a  href="" &gt;Bronze figurines & accessories</a&gt;</li&gt;
            <li&gt;<a  href="" &gt;Memorial garden plaques</a&gt;</li&gt;
      </ul&gt;
      </div>
    </div>
    <script type="text/javascript"&gt;
    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" />
    <!-- desktop -->
    <link href="desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:1224px)" />
    <!-- smartphones -->
    <link href="smartphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width:320px) and (max-width:480px)" />
    <!-- ipad -->
    <link href="ipad.css" rel="stylesheet" type="text/css" media="only screen and (min-width:760px) and (max-width:1024px)" />
    <!-- iphone -->
    <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

  • Responsive Design and @media queries

    I thought my HTML/CSS guns were loaded and good to go; and then I started reading about responsive web design!
    If I have a rule declared in the main body of my CSS and add a media query what happens to the existing rule?
    It looks to me with my experimenting so far that if I take a style in the main section and duplicate that with some edits for a smaller width, I have to then remove it from the original and replicate it in another @media query.  Is that correct? 
    So if I have this:
    header {
        background: url("images/headerhand.png") no-repeat scroll left top transparent;
        height: 300px;
        margin: 40px auto 0;
        min-height: 300px;
        text-align: left;
        width: 100%;
    I need to put this in a @media query for the below break point:
    header {
        background: none;
        height: 300px;
        margin: 40px auto 0;
        min-height: 300px;
        text-align: left;
        width: 100%;
    I then take the rule out of the main section of my style sheet and put that in another media query for the above break point.
    So if I have a header element with background image and color, and border-radius and whatever but only want to lose the background image at a certain break point, I then need two @media queries one for below the break point and one for above and then remove the whole rule from the main section of the site?
    Oh my, that was so complicated, I am not sure I even understand my own question!
    Martin
    PS "Mobile First" is starting to make a lot of sense!

    osgood_ wrote:
    pziecina wrote:
    Hi Os
    As an example, (using Jennys Chocolate Cookies) would it not make more sense to design a mobile only web site, complete with geolocation that shows the nearest outlet selling the cookies?
    So you are saying forget the desktop monster (assign that to the bin) and convince the client mobile is the way to go? Even if that is the case it still seems that you're going to need two or three different design set ups to satifsy the majority of devices, which means more expense, right? Plus from what I've seen the information all crushed into a 400px wide screen looks a bit shite, no?
    Reply -
    No I am saying that one should offer the type of site/service that best suits the clients needs, be this a desktop, responsive or mobile only web site, or even telling the client that an advert in yellow pages would be better.
    pziecina wrote:
    The same may also apply to a restaurants web page, after all it is often the directions to the restaurant, and its proximity to oneself that are important when one is looking for somewhere to go out for a meal, is it not?
    Can't see what location or direction has to do with anything or proximity to oneself. I look in yellow pages if I need a restaurant or I identify it on the computer before I go out........but then again I'm old so maybe younger people do all this whilst they are out. So we come down to demographics - cut out whatever section of society at your own peril. I guess a nightclub would be a better example, can't see many 50 plus year olds wanting to know where one of those are on the move.
    Reply -
    So you are out and about, or driving home and suddenly decide that you would like to go for an Indonesian meal, do you now get the yellow pages out?
    BTW - I am over 60.
    pziecina wrote:
    As for testing on mobile devices, a good testing set-up now costs less than £400, ($600) and most items one will already own.
    They are -
    1  A smartphone, (most people have one now and a good budget smartphone can be purchased for under £70.00)
    2. A tablet device, (An budget android device now cost about £120.00, and can also be used as an e-reader)
    3. A iPod-Touch (If it works on this it will also work exactly the same on the iPhone)
    Well I guess you have to factor in the cost of getting connected to the net on these mobile devices to check everything. I dunno if anyone in the UK offers a reasonable monthly package whereby you can be connected to all these devices 24/7 and not rack up any additional charge per minute.
    Reply -
    Use Shadow and your home wifi network, extra cost nothing.
    PZ

Maybe you are looking for