Home/ Questions/Q 8861151
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T15:25:42+00:00

I’m building a mobile site and having a strange problem. Page scroll sideways. Not

  • 0

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;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try removing the overflow-x:visible styling from the search-inactive.css file.
    From the http://www.css3.com/ website:

    the ‘overflow-x’ property describes what to do with the content that exceeds the element’s width

    Some SO posts that may be relevant:

    • 0