Skip navigation
Currently Being Moderated

page scolling not working in smartphones (media queries)

May 18, 2013 6:04 PM

Tags: #dreamweaver #smartphone #screen #query #media #cs6

Using DW CS6 v12.2 build 6006 on W7

 

  • I designed a website https://balmainmassage.com.au to take advantage of media queries. The desktop design is OK (to me anyway - see screenshot 1 ss1.gif), ss1.gif

but the 480hx800h smartphone version does not work: it looks OK when building it in Dreamweaver (see ss2.gif)

ss2.gif

but ss3.gif shows what it took like on a iPhone 4.

 

ss3.gif

It's the same on an Android phone. They look like a phone with a screen size < 321px. I don't understand why: this is the content of the media query file:

/* Phone */

@import url("index_phone.css") only screen and (max-width:320px);

/* iPhone */

@import url("index_iphone.css") only screen and (min-width:321px) and (max-width:480px);

/* Tablet */

@import url("index_tablet.css") only screen and (min-width:481px) and (max-width:768px);

/* Desktop */

@import url("index_desktop.css") only screen and (min-width:769px);

 

and of course I'm using the index_iphone.css file for the smartphone design. Every page in the site forces the devices to report their actual screen size: <meta name="viewport" content="width=device-width">


  • Worse, the page does not scroll either on the Dreamweaver preview (see ss2, no scroll bars) or on the smartphone browser - either Chrome, Safari or Opera Mini. There's nothing under the edge, the rest of the page is gone!

 

ss4.gif

What am I doing wrong? I can understand the lack of scoll bars previewing a touchscreen - but the page does not scroll on the device either.

 

Can someone help? Thanks

 
Replies
  • Currently Being Moderated
    May 19, 2013 10:00 AM   in reply to claudioparoli

    Why didn't you use the FluidGrid Layouts feature for this?

     

    Example:  View source to see the code.

    http://alt-web.com/FluidGrid/Fluid1.html

     

    I have a problem with your #container block being set to position:fixed.  I don't understand why you need that because positioning removes content from the normal document flow.

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points