How do I get my Fluid Grid Layout page to resizes from portrait to landscape for iPhones?
starting in portrait on iphone 4, fluid grid layout page not resize when turn landscape. after refresh / resize fit page on landscape , turn iphone portrait, page resizes fine. seems working fine on desktop, ignoring ie. media query tags?
if knows solution, appreciated. thanks.
here test page: http://www.bedroomandmore.com/1_b_fluidgrid.html
here media query tags (the first set of rules not have media query tag , becomes default):
@media screen , (max-device-width: 480px) , (orientation : landscape) {
@media screen , (min-width: 481px) {
@media screen , (min-width: 769px) {
here of media query css:
@charset "utf-8";
/* simple fluid media
note: fluid media requires remove media's height , width attributes html
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
}
/* ie 6 not support max-width default width 100% */
.ie6 img {
width:100%;
}
/* mobile layout: 480px , below.(smartphone portrait) */
.gridcontainer {
width: 95.4184%;
padding-left: 0.5907%;
padding-right: 0.5907%;
}
#header {
clear: both;
float: left;
display: block;
margin-left: 0%;
width: 72%;
max-height: 0%;
display: -moz-box; /* firefox */
display: -webkit-box; /* safari , chrome */
display: box;
border: none;
top: auto;
padding-top: 0.25em;
}
#menuhorizontal {
clear: both;
float: left;
width: 118%;
height:100%;
margin-left: auto;
position:relative;
top:-1em;
display: block;
}
#slides {
clear: both;
float: left;
margin-left: 0.1em;
width: 119%;
position: relative;
top: -1em;
display: block;
}
/*slides container: important: use position:relative; top:-1em; position div.
set width of slides container
set to display: none prevent content flash*/
.slides_container {
clear: both;
width: 100%;
display: block;
}
/*each slide: important:
set width of slides
if height not specified height set slide content
set to display: block original setting
slide_container container size
slides_container div set size of image inside--adjust fit image in not cropped*/
.slides_container div {
clear: both;
width: 69%;
display: block;
}
}
/* mobile layout: 480px. (smartphone landscape)
inherits styles mobile layout 480px.
set clear:none; allow div shift
or set clear:both; take whole row of screen*/
@media screen , (max-device-width: 480px) , (orientation : landscape) {
.gridcontainer {
width: 95.4184%;
padding-left: 0.7907%;
padding-right: 0.7907%;
}
#header {
clear:both;
float: left;
display: block;
margin-left: auto;
width:100%;
display: -moz-box; /* firefox */
display: -webkit-box; /* safari , chrome */
display: box;
border: none;
}
#menuhorizontal {
clear:both;
float: left;
width: 110%;
margin-left:auto;
display: block;
}
#slides {
clear:both;
float: left;
margin-left: 0%;
width: 68%;
display: block;
}
/*slides container: important:
set width of slides container
set to display: none prevent content flash*/
.slides_container {
clear:both;
float: left;
width: 100%;
display: block;
}
/*each slide: important:
set width of slides
if height not specified height set slide content
set to display: block original setting*/
.slides_container div {
clear:both;
width:69%;
display: block;
}
}
/* tablet layout: 481px 768px. inherits styles from: mobile layout.
set clear:none; allow div shift
or set clear:both; take whole row of screen*/
@media screen , (min-width: 481px) {
.gridcontainer {
width: 95.9456%;
padding-left: 0.5271%;
padding-right: 0.5271%;
}
#header {
clear:both;
float: left;
display: block;
margin-left: auto;
width: 100%;
display: -moz-box; /* firefox */
display: -webkit-box; /* safari , chrome */
display: box;
border: none;
}
#menuhorizontal {
clear:both;
float: left;
margin-left:auto;
display: block;
}
#slides {
clear:both;
float: left;
margin-left: 0%;
width: 70%;
display: block;
}
/*slides container: important:
set width of slides container
set to display: none prevent content flash*/
.slides_container {
clear:both;
float: left;
width: 100%;
display: block;
}
/*each slide: important:
set width of slides
if height not specified height set slide content
set to display: block original setting*/
.slides_container div {
width: 100%;
display: block;
}
}
i found problem. there bug in safari iphone 4. use code fix found @ http://stackoverflow.com/a/6379407
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment