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

Similar Messages

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

Edge Animate media queries (not responsive scaling)

Is is possible to use media queries with edge animate? For example, if the screen width is less than 480px then resize the stage from 900x700px to 320x480px? Or add/change properties like float?

If your product was installed via the Creative Cloud, you should be able to update it using the Creative Cloud. If your product was installed via other media (like from the DVD), you will not be able to update it using the Creative Cloud. Now that CC has launched, you might want to look at upgrading now and try it out now.
Thanks,
-Elaine

Fluid grid Media Queries

Hi, how are you all this weekend?
I am getting more comfortable with the DW CC Fluid Grid Layout. I really like it! I just am a bit confused with the media queries. It, by default has two. One set for min-width 481px and one set for 769px. That seems fine to me. I noticed though, when you come down to the icons of smartphone, tablet, and desktop. I click smartphone first and notice that it is set to smart phone 480px, so it will not display min-width 481px and when I click the 481px media query to begin work, I naturally will click the smart phone icon again and it displays 480, not showing me my completed work because it is not reaching the min-width of 481. Same thing occurs with the 768px.
Should I change the media queries to 480px and 769px? Or should I change the icon sizes to match the media queries. Just a bit off that it is one pixel larger than the default icons.
Thanks.

FGL is a mobile first framework. Everything that you place in the general section of the stylesheet will apply to all screen sizes ranging from mobile through to large screens.
If you want to change the look of the page in larger than mobile phone screens, you start using media queries. In FGL, the first larger screen size takes effect at a minimum width of 481px (tablets), the next takes effect at a minimum width of 769px (desktops). This is exactly what the icons depict, hence no adjustment is required.

Does IOS7 support Media Queries

Hi,
I have developed a html5 page which i want to fit to the size of IPAD(ios7) device.
Using the safari browser when i run the URL it is not able to take the shape of device orientation.
we are using media Queries to fit the size of the device. It seems media queries does not support IOS7 ?
Pls suggest.
Thanks
vijay

Again, not sure what is is you are trying to achieve. Media Queries define CSS style sections for certain criteria only.
In the case of an iPad a Media query like this would target the iPad in Landscape mode, as well as any other device who's browser supports the media query.
@media screen and(orientation:landscape)
while this would target it in Portrait mode.
@media screen and(orientation:portrait)
its up to your CSS in those sections to adjust your website to those dimensions or present different things depending on orientation.
For instance this HTML and CSS code will show which orientation the device is in by showing and hiding a div through a media query that detects orientation.
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile Device Orientation with Media Queries</title>
<style type="text/css">
div.orientl
background-color:#f2f2f2;
padding:10px;
font-family:Arial,"sans serif";
display:none;
div.orientp
background-color:#464646;
padding:10px;
font-family:Arial,"sans serif";
color:#ffffff;
display:none;
@media screen and(orientation:portrait)
       div.orientp
            display:block
       div.desktop
            display: none;
@media screen and(orientation:landscape)
       div.orientl
            display:block
       div.desktop
            display: none;
</style>
</head>
<body>
<div class="orientl">
<h1>Landscape</h1>
</div>
<div class="orientp">
<h1>Portrait</h1>
</div>
<div class="desktop">
<h1>Desktop Browser or no Orientation determined</h1>
</div>
</body>
<html>

CSS, Media Queries and Iphone4

I downloaded the Adobe Certified iPhone 4 Emulator and what it is showing is not at all what is happening on the phone. I think part of it has to do with the pixel ratio, and using media queries?
Has anyone else had any problems? Or know how I can fix this?
Thanks.
-Jeana

I have the same problem with css3 (border-radius property). Rounded corners show up correct on my iPhone 4; the Adobe Certified iPhone 4 Emulator shows rectangles...
Has anyone a solution?
Regards,
Men

Responsive Background Images with Media Queries

Hello,
I'm creating a mobile website in Dreamweaver and would like to use an image which will change with different device widths. I'm using media queries with background images. My problem is that in order for the background images to display, I need to assign a height to the div. When the image is scaled down the height stays static, leaving white space beneath it. There will be content below the image so the white space will push it down and look wrong. Is there a way to use multiple images with media queries keeping the height responsive? Thank you!
@media screen and (max-width: 1024px) {
#mainImage {
          background-image: url(../images/mainImageLarge.jpg);
          background-repeat: no-repeat;
          background-position: center top;
          background-size: 100%;
          height: 272px;
          border-top-width: 3px;
          border-top-style: solid;
          border-top-color: #FFF;
@media only screen and (max-width : 480px) {
#mainImage {
          background-image: url(../images/mainImageMed.jpg);
          background-repeat: no-repeat;
          background-position: center top;
          background-size: 100%;
          height: 107px;
          border-top-width: 3px;
          border-top-style: solid;
          border-top-color: #FFF;
@media only screen and (max-width : 320px) {
          #mainImage img {
          background-image: url(../images/mainImageSmall.jpg);
          background-repeat: no-repeat;
          background-position: center top;
          background-size: 100%;
          height: 150px;
          border-top-width: 3px;
          border-top-style: solid;
          border-top-color: #FFF;

Like this example:
http://alt-web.com/FluidGrid/Fluid-4.html
METHOD:
Insert 2 images -- one for desktops and one for mobile. Assign classes to each image.
<img id="banner" class="desktop" src="desktop_image.jgp" />
<img id="banner" class="mobile" src="mobile_image.jpg"/>
In your CSS, use display:none and display:block to show/hide.
.desktop {
    display:block;
.mobile {
    display:none;
/* Special Rules for mobiles */
@media only screen and (max-width: 480px) {
    .desktop {display:none}
    .mobile {display:block}
Feel free to set your break points however you wish.
Nancy O.

Media Queries Layout

Hi Guys,
I am trying to build the below image using media queries.
I can easily get the layout working but I have a problem.
How do you get the Left 'Green' section to always be fixed and always full height of the screen in which it is viewed on?
Just to be clear these colours arent the actual colours being used.
Any help would be much appreciated.
Thank you.
Alex

For equal height CSS Columns, use display:table properties. See example below. View source in browser to see the code.
Responsive Equal Height CSS Columns
Nancy O.

Media Queries Adjustable full height div

Hi Everyone,
I am building a website using media queries but I want to know if it is possible to have an initial div that automatically fits the full width and height of the screen in which it is viewed. Obviously then scale down once the browser window is scaled.
If it can be done can anyone point me to a tutorial or give me the answer here.
Thank You.
Kind Regards,
Alex

Forget last post, try this: (change 'yourBackgroundImage.jpg' to the name of YOUR image)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="charset=UTF-8">
<title>Untitled Document</title>
<style>
html,
body {
height: 100%;
body {
margin: 0;
padding: 0;
#bgCover {
height: 100%;
width: 100%;
top: 0;
left: 0;
bottom: 0;
background-image: url('yourBackgroundImage.jpg');
background-position: center top;
background-attachment: scroll;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 1;
#navigation {
    position: fixed;
    width: 100%;
    background-color: #000;
    color: #fff;
    padding: 20px 0;
    text-align: center;
    z-index: 2;
    font-size: 20px;
#pageTitle {
color: #000;
font-size: 70px;
text-align: center;
margin: 0 auto;
padding-top: 300px;
#pageContent p {
    padding: 20px 40px;
    margin: 0;
</style>
</head>
<body>
<div id="navigation">
Navigation goes here
</div>
<div id="bgCover">
<div id="pageTitle">Headline Goes Here</div>
</div>
<div id="pageContent">
    <p>Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.</p>
ere. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.</p>
</div>
</body>
</html>

Media Queries: Make a div dissapear in some?

I'm using media queries to try and make my site more mobile/ tablet friendly.
I have two headers, one for desktop, one for mobile.
They are in two seperate divs, how can I make only the desired div show up osing the css?
I tried,
.header
width:0px;
height:0px;
overflow: hidden;
but, on browsers pulled to a small screen it looks fine.
On an actual phone, it shows both headers!
Any ideas?

Display:none = nothing in that region is displayed.
http://www.w3schools.com/css/css_display_visibility.asp
Visbility:hidden = content is hidden but the space allocated for it remains in view.
http://www.w3schools.com/cssref/pr_class_visibility.asp
Nancy O.

Small media queries

Is it possible to attatch a media query to a specific rule within a stylesheet
for example i would have the lines
#maincontainer }
width: 1000px;
#maincontainer }
width: 300px;
and attatch a different screen size to
each one

Hi
To use media queries in your css file you would insert similar to the following -
@media only all and (max-width: 1024px) and (max-height: 768px) {
body {
your css code goes here
This would make the code inside the query apply the max page dimensions, (when resized above this) to only the items contained within the css rule(s). Don't forget the extra { and } to enclose the css code.
They work similar to a 'conditional' rule for css
PZ
www.pziecina.com

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!

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

"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

Using media queries?

Similar Messages

Maybe you are looking for