I'm building a mobile site and having a strange problem. Page scroll sideways. Not only that, header seems to be fixed and the content seems to scroll sideways. Problem will be best understood, if you look at this page
I tried setting max, min width for body, #search-page, #search-controls. Nothing seems to work.
#search-page #header.ui-bar-a{
background: #fff;
border: none;
border-bottom: 3px solid #5D2B44;
padding:0 10px 4px 0;
margin:0;
height:63px;
text-shadow: none;
}
#search-controls {
height: 63px;
padding: 5px;
}
/*#search-controls .br-right {
border-right: 1px solid #ccc;
}
*/
.search-field {
width: 100%;
overflow: hidden;
height: 26px;
}
.search-field .ui-btn-inner{
font-size: 12px!important;
font-weight:bold!important;
}
.filter, .ratings, .name {
height: 24px;
margin: 0 auto;
font-size: 12px;
line-height: 12px;
text-transform: uppercase;
text-shadow: none;
min-width: 55px;
padding: 0 2px;
}
.filter{float: left;}
.ratings, .name, .sort-by{float: right;}
.ratings{margin-right: 1px;}
.sort-by {
font-size: 16px;
margin: 6px 20px 0 0;
}
/* Stacked List */
.ui-content{overflow-x: visible;}
.ui-content .ui-listview {
margin: -10px;
}
.ui-listview li{
padding: 0;
}
.ui-li-static.ui-li {
padding: 0 15px 0 0;
margin: 0 0 -10px 7px;
}
.ui-li-static.ui-li-has-thumb {
min-height: 85px;
padding-left: 105px;
}
.ui-li-thumb{
max-height: 85px;
max-width: 100%;
}
.ui-li-heading{
color: #5D2B44;
font-size: 18px;
font-weight: bold;
line-height: 18px;
padding-top: 10px;
margin: 10px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ui-li-heading .ui-link, .ui-li-heading .ui-link:visited, .ui-li-heading .ui-link:active{
color: #5D2B44;
text-decoration: none;
}
.ui-li-desc.cusine {
font-size: 12px;
font-weight: normal;
display: block;
line-height: 12px;
padding: 1px 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.ui-li-desc.cusine {
color: #999;
margin: -.9em 0 0;
}
.ui-li-desc.rating {
color: #666;
margin: -.9em 0 0;
}
.ui-li-desc.location {
color: #424242;
margin: -.2em 0 0;
}
.result {
height: 85px;
border-bottom: 1px solid #5D2B44;
display: block;
overflow: hidden;
}
.result img {
width: 95px;
height: 85px;
margin: 0 10px 0 0;
float: left;
}
.result .info {
padding: 12px 10px 0 0;
float: left;
text-shadow: none;
max-width: 385px;
height: 75px;
}
.result span {
display: block;
}
.result .restaurant {
font-size: 18px;
line-height: 18px;
font-weight: bold;
color: #5D2B44;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.result .cusine {
font-size: 12px;
line-height: 12px;
color: #999;
padding: 1px 0;
}
.result .stars {
height: 12px;
padding-top: 0px;
}
.result .location {
font-size: 12px;
line-height: 12px;
color: #424242;
}
.rates .rating-number{
line-height: 12px;
}
